@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-CY6HHLYM.js

@@ -0,0 +1,184 @@
+import {
+  STACK_BREAK
+} from "./chunk-EYPRDTWI.js";
+import {
+  CARD_RADIUS,
+  cardSurfaceStyles,
+  isActionable,
+  isSelectable,
+  slotTestIds
+} from "./chunk-NXX3ZQKO.js";
+import {
+  useDragItem
+} from "./chunk-JCJGJX7V.js";
+import {
+  RAIL_COUNT,
+  RAIL_GAP,
+  railsTemplateFor,
+  useListRails
+} from "./chunk-TAB6AIPN.js";
+import {
+  DENSITY_ROW_PADDING
+} from "./chunk-2XGGHYEA.js";
+
+// src/components/data-display/DataViews/base-list-card-geometry.tsx
+import { useTheme } from "@mui/material/styles/index.js";
+function isTextSelection() {
+  return (globalThis.getSelection?.()?.toString().length ?? 0) > 0;
+}
+function clickKeys(onClick) {
+  return (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onClick();
+  };
+}
+function rowSx(opts) {
+  const { inGroup, railCount, cellTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable } = opts;
+  return {
+    position: "relative",
+    borderRadius: CARD_RADIUS,
+    display: "grid",
+    zoom: scale,
+    // SUBGRID AND `container-type` CANNOT COEXIST on one element: containment
+    // makes the box size independently of its parent, so the browser drops the
+    // subgrid and every slot stacks into one column. (Observed exactly that —
+    // computed `grid-template-columns: 1222px` on a card asking for subgrid.)
+    //
+    // So inside a group the GROUP is the query container and the row is the
+    // subgrid; standalone, the row is both the container and its own grid.
+    ...inGroup ? { gridColumn: `span ${railCount}`, gridTemplateColumns: "subgrid" } : {
+      containerType: "inline-size",
+      gridTemplateColumns: cellTemplate ?? railsTemplateFor(gutters, metaColumns)
+    },
+    alignItems: "center",
+    // Wide enough that the meta cluster, the value and the status read as three
+    // columns rather than one run of text — the complaint that started all this
+    // was `MÉTODO PIX R$ 13,90` scanning as a single phrase.
+    columnGap: RAIL_GAP,
+    width: "100%",
+    px: pad,
+    py: padY,
+    cursor: draggable ? "grab" : interactive ? "pointer" : void 0,
+    ...draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {},
+    ...interactive ? { "&:hover": { backgroundColor: "action.hover" } } : {},
+    // A real focus ring, which a clickable <div> never had.
+    "&:focus-visible": { outline: 2, outlineStyle: "solid", outlineColor: "primary.main", outlineOffset: 2 },
+    // TWO-LINE, below the point where the shared rails stop helping.
+    //
+    // The standard mobile transaction row: what the record IS and what it COST
+    // on the first line, the supporting detail on the second. Better than
+    // truncating four columns into ellipses, and the reason each slot carries a
+    // `data-slot` — the placement is explicit rather than whatever order the
+    // children happen to be in.
+    //
+    //   [ select ][ leading ][ title …………… ][   menu ]
+    //                        [ (cells) …………… ][  value ]
+    //
+    // The MENU stays in the top-right corner at every width. It is the row's
+    // one fixed landmark — an overflow that moves to the second line on a phone
+    // is an overflow nobody finds twice.
+    [`@container (max-width: ${STACK_BREAK}px)`]: {
+      gridTemplateColumns: "auto auto minmax(0, 1fr) max-content",
+      ...inGroup ? { gridColumn: `span ${RAIL_COUNT}` } : {},
+      rowGap: 0.75,
+      columnGap: 1,
+      '& > [data-slot="drag"]': { display: "none" },
+      '& > [data-slot="select"]': { gridArea: "1 / 1" },
+      '& > [data-slot="leading"]': { gridArea: "1 / 2" },
+      '& > [data-slot="caption"]': { gridArea: "1 / 3" },
+      '& > [data-slot="actions"]': { gridArea: "1 / 4", justifyContent: "flex-end" },
+      '& > [data-slot="meta"]': { display: "none" },
+      // Second line, starting under the title rather than under the checkbox.
+      '& > [data-slot="value"]': { gridArea: "2 / 4", textAlign: "right" }
+    },
+    ...divider ? { borderRadius: 0, borderWidth: 0, borderBottomWidth: 1, borderStyle: "solid" } : {}
+  };
+}
+function dragIdFor(props, actionable) {
+  return props.draggable === false || !actionable ? void 0 : props.dragId;
+}
+function metaShape(props) {
+  const columns = props.meta?.length ?? 0;
+  return { columns, present: columns > 0 || props.metaSlot != null };
+}
+function useRowShell(props) {
+  const actionable = isActionable(props.state);
+  const group = useListRails();
+  const scale = props.scale ?? 1;
+  return {
+    group,
+    actionable,
+    scale,
+    theme: useTheme(),
+    selectable: isSelectable(props),
+    slot: slotTestIds(props.testId),
+    drag: useDragItem(dragIdFor(props, actionable)),
+    // Standalone holds no gutter open: there is no list beside it to line up
+    // with, so a reserved-but-empty rail is pure inset.
+    reserve: group?.reserveGutters ?? false,
+    // 1, not 1.5. The row's contents still have to line up with the toolbar
+    // above them, but 12px of card padding stacked on the checkbox's own 9px
+    // and an empty drag gutter's 24px read as a row indented for no reason.
+    //
+    // Not multiplied by `scale` — the row's `zoom` already scales it, and doing
+    // both would square the factor on padding alone.
+    pad: 1,
+    padY: DENSITY_ROW_PADDING[group?.density ?? props.density ?? "cozy"],
+    // A card that navigates does so with a real anchor, so it takes no click
+    // handler of its own — the stretched link IS the target.
+    acts: props.onClick != null && props.href == null && actionable
+  };
+}
+function actionProps(onClick) {
+  return {
+    role: "button",
+    tabIndex: 0,
+    onClick: () => {
+      if (isTextSelection()) return;
+      onClick?.();
+    },
+    onKeyDown: clickKeys(() => onClick?.())
+  };
+}
+function rowSurface(props, shell) {
+  const { theme, selectable, drag } = shell;
+  const surface = cardSurfaceStyles(
+    { ...props, selectable, shape: "row", state: drag.dragging ? "disabled" : props.state },
+    theme
+  );
+  if (props.divider !== true || surface.borderColor != null) return surface;
+  return { ...surface, borderBottomColor: theme.palette.divider };
+}
+function rowStyles(props, shell, cellTemplate) {
+  const { group, selectable, drag, reserve, pad, padY, scale, acts } = shell;
+  return {
+    ...rowSurface(props, shell),
+    ...rowSx({
+      inGroup: group !== null,
+      railCount: group?.railCount ?? RAIL_COUNT,
+      cellTemplate,
+      gutters: {
+        disclose: reserve || props.children != null,
+        drag: reserve || drag.draggable,
+        select: reserve || selectable
+      },
+      metaColumns: metaShape(props).columns,
+      pad,
+      padY,
+      scale,
+      divider: props.divider ?? false,
+      interactive: acts || props.href != null,
+      draggable: drag.draggable && drag.handleProps === void 0
+    })
+  };
+}
+
+export {
+  rowSx,
+  metaShape,
+  useRowShell,
+  actionProps,
+  rowStyles
+};
+//# sourceMappingURL=chunk-CY6HHLYM.js.map

package/dist/chunk-CZT3AV7I.js

@@ -0,0 +1,172 @@
+import {
+  onMedia,
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/data-display/Carousel/Carousel.slide.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SlideCaption = ({
+  title,
+  description,
+  content,
+  image
+}) => /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", zIndex: 1, textAlign: "center", p: 3 }, children: [
+  title && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h5",
+      sx: (theme) => ({
+        color: image ? onMedia(theme) : "text.primary",
+        textShadow: image ? `0 2px 4px ${shadowInk(theme, 0.5)}` : "none",
+        mb: 1
+      }),
+      children: title
+    }
+  ),
+  description && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "body1",
+      sx: (theme) => ({
+        color: image ? onMedia(theme) : "text.secondary",
+        textShadow: image ? `0 1px 2px ${shadowInk(theme, 0.5)}` : "none"
+      }),
+      children: description
+    }
+  ),
+  content
+] });
+var CarouselSlide = ({
+  item,
+  index,
+  isActive,
+  variant,
+  clickable,
+  onSelect
+}) => {
+  const theme = useTheme();
+  const content = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: clickable ? "pointer" : "default",
+        position: "relative"
+      },
+      onClick: () => onSelect(item, index),
+      children: [
+        item.image && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "img",
+            src: item.image,
+            alt: item.alt || item.title,
+            sx: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              position: "absolute",
+              top: 0,
+              left: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SlideCaption,
+          {
+            title: item.title,
+            description: item.description,
+            content: item.content,
+            image: item.image
+          }
+        )
+      ]
+    }
+  );
+  if (variant === "cards") {
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        elevation: isActive ? 8 : 2,
+        sx: {
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          transform: isActive ? "scale(1)" : "scale(0.9)",
+          transition: theme.transitions.create(["transform", "box-shadow"])
+        },
+        children: content
+      }
+    );
+  }
+  return content;
+};
+var CarouselTrack = ({
+  items,
+  activeIndex,
+  variant,
+  animation,
+  transition: Transition,
+  clickable,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    "data-testid": "carousel-track",
+    sx: {
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      display: "flex",
+      alignItems: "center"
+    },
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      Transition,
+      {
+        in: index === activeIndex,
+        timeout: 600,
+        ...animation === "flip" && { direction: "left" },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-testid": `carousel-slide-${index}`,
+            "data-active": index === activeIndex,
+            sx: {
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              display: index === activeIndex ? "block" : "none"
+            },
+            children: /* @__PURE__ */ jsx(
+              CarouselSlide,
+              {
+                item,
+                index,
+                isActive: index === activeIndex,
+                variant,
+                clickable,
+                onSelect
+              }
+            )
+          }
+        )
+      },
+      item.id
+    ))
+  }
+);
+
+export {
+  CarouselSlide,
+  CarouselTrack
+};
+//# sourceMappingURL=chunk-CZT3AV7I.js.map

package/dist/chunk-CZT3AV7I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.slide.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { CarouselItem, CarouselProps } from './Carousel.types';\nimport { onMedia, shadowInk } from '../../../tokens/ink';\n\nexport interface CarouselSlideProps {\n  item: CarouselItem;\n  index: number;\n  isActive: boolean;\n  variant: NonNullable<CarouselProps['variant']>;\n  clickable: boolean;\n  onSelect: (item: CarouselItem, index: number) => void;\n}\n\n/**\n * A slide's caption. Over an image it is white with a shadow so it stays legible\n * against whatever the photograph happens to be; on a bare surface it uses the\n * ordinary text colours.\n */\nconst SlideCaption: React.FC<Pick<CarouselItem, 'title' | 'description' | 'content' | 'image'>> = ({\n  title,\n  description,\n  content,\n  image,\n}) => (\n  <Box sx={{ position: 'relative', zIndex: 1, textAlign: 'center', p: 3 }}>\n    {title && (\n      <Typography\n        variant=\"h5\"\n        sx={(theme) => ({\n          color: image ? onMedia(theme) : 'text.primary',\n          textShadow: image ? `0 2px 4px ${shadowInk(theme, 0.5)}` : 'none',\n          mb: 1,\n        })}\n      >\n        {title}\n      </Typography>\n    )}\n\n    {description && (\n      <Typography\n        variant=\"body1\"\n        sx={(theme) => ({\n          color: image ? onMedia(theme) : 'text.secondary',\n          textShadow: image ? `0 1px 2px ${shadowInk(theme, 0.5)}` : 'none',\n        })}\n      >\n        {description}\n      </Typography>\n    )}\n\n    {content}\n  </Box>\n);\n\nexport const CarouselSlide: React.FC<CarouselSlideProps> = ({\n  item,\n  index,\n  isActive,\n  variant,\n  clickable,\n  onSelect,\n}) => {\n  const theme = useTheme();\n\n  const content = (\n    <Box\n      sx={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        alignItems: 'center',\n        cursor: clickable ? 'pointer' : 'default',\n        position: 'relative',\n      }}\n      onClick={() => onSelect(item, index)}\n    >\n      {item.image && (\n        <Box\n          component=\"img\"\n          src={item.image}\n          alt={item.alt || item.title}\n          sx={{\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n          }}\n        />\n      )}\n\n      <SlideCaption\n        title={item.title}\n        description={item.description}\n        content={item.content}\n        image={item.image}\n      />\n    </Box>\n  );\n\n  // The cards variant gives each slide its own raised surface, and lifts the\n  // active one further so the stack reads as a deck rather than a strip.\n  if (variant === 'cards') {\n    return (\n      <Paper\n        elevation={isActive ? 8 : 2}\n        sx={{\n          width: '100%',\n          height: '100%',\n          overflow: 'hidden',\n          transform: isActive ? 'scale(1)' : 'scale(0.9)',\n          transition: theme.transitions.create(['transform', 'box-shadow']),\n        }}\n      >\n        {content}\n      </Paper>\n    );\n  }\n\n  return content;\n};\n\nexport interface CarouselTrackProps {\n  items: CarouselItem[];\n  activeIndex: number;\n  variant: NonNullable<CarouselProps['variant']>;\n  animation: NonNullable<CarouselProps['animation']>;\n  transition: React.ElementType;\n  clickable: boolean;\n  onSelect: (item: CarouselItem, index: number) => void;\n}\n\n/**\n * The slides themselves. Every slide stays mounted and absolutely positioned so\n * the transition has both the outgoing and incoming one to work with; `display`\n * is what actually hides the rest.\n */\nexport const CarouselTrack: React.FC<CarouselTrackProps> = ({\n  items,\n  activeIndex,\n  variant,\n  animation,\n  transition: Transition,\n  clickable,\n  onSelect,\n}) => (\n  <Box\n    data-testid=\"carousel-track\"\n    sx={{\n      width: '100%',\n      height: '100%',\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    }}\n  >\n    {items.map((item, index) => (\n      <Transition\n        key={item.id}\n        in={index === activeIndex}\n        timeout={600}\n        {...(animation === 'flip' && { direction: 'left' as const })}\n      >\n        <Box\n          data-testid={`carousel-slide-${index}`}\n          data-active={index === activeIndex}\n          sx={{\n            position: 'absolute',\n            width: '100%',\n            height: '100%',\n            display: index === activeIndex ? 'block' : 'none',\n          }}\n        >\n          <CarouselSlide\n            item={item}\n            index={index}\n            isActive={index === activeIndex}\n            variant={variant}\n            clickable={clickable}\n            onSelect={onSelect}\n          />\n        </Box>\n      </Transition>\n    ))}\n  </Box>\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-D5SZXH7Q.js

@@ -0,0 +1,148 @@
+import {
+  alpha
+} from "./chunk-6JAIFIPW.js";
+import {
+  ABSOLUTE_INK,
+  ELEVATION_SHADOWS,
+  NEUTRAL_RAMP
+} from "./chunk-N3GAFIXG.js";
+
+// src/components/form/Switch/Switch.metrics.ts
+var SWITCH_BLACK = ABSOLUTE_INK.black;
+var SWITCH_SIZES = {
+  xs: { width: 34, height: 18, padding: 1, thumbSize: 14 },
+  sm: { width: 42, height: 22, padding: 1, thumbSize: 18 },
+  md: { width: 50, height: 26, padding: 1, thumbSize: 22 },
+  lg: { width: 58, height: 30, padding: 2, thumbSize: 24 },
+  xl: { width: 66, height: 34, padding: 2, thumbSize: 28 }
+};
+var lookOf = (variant) => {
+  if (variant === "ios") return "ios";
+  if (variant === "android") return "android";
+  if (variant === "material") return "material";
+  return "default";
+};
+var geometryOf = (size, width, height) => {
+  const preset = SWITCH_SIZES[size] ?? SWITCH_SIZES.md;
+  return { ...preset, width: width || preset.width, height: height || preset.height };
+};
+var THUMB_RADIUS = {
+  ios: () => "50%",
+  android: () => 4,
+  material: (thumbSize) => thumbSize / 3,
+  default: () => "50%"
+};
+var TRACK_RADIUS = {
+  ios: (height) => height / 2,
+  android: (height) => height / 3,
+  material: (height) => height / 2.5,
+  default: (height) => height / 2
+};
+var thumbRadius = (look, thumbSize) => {
+  const radius = THUMB_RADIUS[look](thumbSize);
+  return typeof radius === "number" ? radius : thumbSize / 2;
+};
+var THUMB_ELEVATION = { ios: 0, android: 3, material: 2, default: 2 };
+var MUI_SHADOWS = {
+  2: ELEVATION_SHADOWS[2],
+  3: ELEVATION_SHADOWS[3]
+};
+var IOS_THUMB_SHADOW = `0 3px 1px 0 ${alpha(SWITCH_BLACK, 0.04)}, 0 3px 8px 0 ${alpha(SWITCH_BLACK, 0.12)}, 0 1px 0 0 ${alpha(SWITCH_BLACK, 0.08)}`;
+var iosTrackShadow = () => `inset 0 0 0 0.5px ${alpha(SWITCH_BLACK, 0.1)}, inset 0 2px 3px ${alpha(SWITCH_BLACK, 0.12)}`;
+var TRACK_ALPHA = { ios: 0.1, android: 0.2, other: 0.3 };
+var trackColor = (ink, look) => {
+  if (look === "ios") return alpha(ink.black, TRACK_ALPHA.ios);
+  const strength = look === "android" ? TRACK_ALPHA.android : TRACK_ALPHA.other;
+  return alpha(ink.disabled, strength);
+};
+var thumbTravel = (look, geometry) => {
+  const { width, thumbSize, padding } = geometry;
+  if (look === "ios") {
+    return { rest: padding + IOS_BASE_OFFSET, travel: width - thumbSize - IOS_TRAVEL_INSET };
+  }
+  return { rest: padding, travel: width - thumbSize - padding * 2 };
+};
+var IOS_BASE_OFFSET = 2;
+var IOS_TRAVEL_INSET = 4;
+var SWITCH_TRANSITION = { ms: 300, easing: "cubic-bezier(0.4, 0, 0.2, 1)" };
+var DISABLED = { trackOpacity: 0.3, checkedTrackOpacity: 0.5, thumbGrey: 100 };
+var SWITCH_GLASS = {
+  trackAlpha: 0.1,
+  thumbAlpha: 0.9,
+  borderAlpha: 0.2,
+  trackBlur: 20,
+  thumbBlur: 10
+};
+var SWITCH_GRADIENT = {
+  checked: { angleDeg: 90, stops: [0, 50, 100] },
+  resting: { angleDeg: 135, lightAlpha: 0.3, mainAlpha: 0.2 },
+  shimmerMs: 3e3
+};
+var SWITCH_GLOW = { blur: 10, alpha: 0.6, insetBlur: 10, insetAlpha: 0.2, ms: 2e3 };
+var SWITCH_PULSE = { ms: 2e3, minOpacity: 0.7, minScale: 0.95 };
+var SWITCH_RIPPLE = { alpha: 0.2, ms: 600, scale: 2 };
+var SWITCH_SPINNER = { sizeRatio: 0.6, borderWidth: 2, ms: 1e3 };
+var SWITCH_ICON_SIZES = { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 };
+var SWITCH_ICON = { inset: 4, hiddenScale: 0.8 };
+var TRACK_LABEL = { fontSize: 12, fontWeight: 500, insetUnits: 1 };
+var SWITCH_LABEL = { fontSize: 14, lineHeight: 1.43, fontWeight: 500 };
+var SWITCH_DESCRIPTION = { fontSize: 12, lineHeight: 1.66, marginTopUnits: 0.5 };
+var SWITCH_HELPER = { fontSize: 12, lineHeight: 1.66, marginTopUnits: 1 };
+var LABEL_GAP_UNITS = { beside: 2, stacked: 1 };
+var TAP_TARGET_MIN = 40;
+var NEUTRAL_GREY = { main: 700, dark: 800, light: 500 };
+var NEUTRAL_FALLBACK = {
+  main: NEUTRAL_RAMP[NEUTRAL_GREY.main],
+  dark: NEUTRAL_RAMP[NEUTRAL_GREY.dark],
+  light: NEUTRAL_RAMP[NEUTRAL_GREY.light]
+};
+var NEUTRAL_CONTRAST = ABSOLUTE_INK.white;
+var RESTING_THUMB = ABSOLUTE_INK.white;
+var SWITCH_HOVER = { thumbScale: 1.05, elevation: 4, blur: 12, alpha: 0.2 };
+var SWITCH_FOCUS_RING = { width: 6, alpha: 0.2 };
+var seconds = (ms) => `${ms / 1e3}s`;
+var showsTrackLabels = (variant, onText, offText) => variant === "label" && Boolean(onText ?? offText);
+
+export {
+  SWITCH_BLACK,
+  SWITCH_SIZES,
+  lookOf,
+  geometryOf,
+  THUMB_RADIUS,
+  TRACK_RADIUS,
+  thumbRadius,
+  THUMB_ELEVATION,
+  MUI_SHADOWS,
+  IOS_THUMB_SHADOW,
+  iosTrackShadow,
+  TRACK_ALPHA,
+  trackColor,
+  thumbTravel,
+  IOS_BASE_OFFSET,
+  IOS_TRAVEL_INSET,
+  SWITCH_TRANSITION,
+  DISABLED,
+  SWITCH_GLASS,
+  SWITCH_GRADIENT,
+  SWITCH_GLOW,
+  SWITCH_PULSE,
+  SWITCH_RIPPLE,
+  SWITCH_SPINNER,
+  SWITCH_ICON_SIZES,
+  SWITCH_ICON,
+  TRACK_LABEL,
+  SWITCH_LABEL,
+  SWITCH_DESCRIPTION,
+  SWITCH_HELPER,
+  LABEL_GAP_UNITS,
+  TAP_TARGET_MIN,
+  NEUTRAL_GREY,
+  NEUTRAL_FALLBACK,
+  NEUTRAL_CONTRAST,
+  RESTING_THUMB,
+  SWITCH_HOVER,
+  SWITCH_FOCUS_RING,
+  seconds,
+  showsTrackLabels
+};
+//# sourceMappingURL=chunk-D5SZXH7Q.js.map

package/dist/chunk-D5SZXH7Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.metrics.ts"],"sourcesContent":["import type { SwitchVariant } from './Switch.base';\nimport { alpha } from '../../../tokens/color';\nimport { ABSOLUTE_INK, ELEVATION_SHADOWS, NEUTRAL_RAMP } from '../../../tokens/ink.core';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Switch` RENDERERS DRAW WITH.\n *\n * `Switch.styles.ts` (web, emotion over MUI's `Switch`) and\n * `Switch.native.tsx` (React Native, drawing the track and thumb itself) read\n * this one table: the geometry per size, the four looks' radii and shadows,\n * the resting track colours, and the type the label, the description and the\n * helper are set in.\n *\n * Spacing is in SPACING UNITS where the web writes `theme.spacing(n)`;\n * everything else is px, a ratio or an alpha.\n */\n\n/** MUI's `palette.common.black`, which `UiTheme` does not carry. */\nexport const SWITCH_BLACK = ABSOLUTE_INK.black;\n\nexport interface SwitchGeometry {\n  width: number;\n  height: number;\n  padding: number;\n  thumbSize: number;\n}\n\nexport const SWITCH_SIZES: Record<SizeValue, SwitchGeometry> = {\n  xs: { width: 34, height: 18, padding: 1, thumbSize: 14 },\n  sm: { width: 42, height: 22, padding: 1, thumbSize: 18 },\n  md: { width: 50, height: 26, padding: 1, thumbSize: 22 },\n  lg: { width: 58, height: 30, padding: 2, thumbSize: 24 },\n  xl: { width: 66, height: 34, padding: 2, thumbSize: 28 },\n};\n\n/** The four platform looks. `label` prints its wording on a `default` track. */\nexport type SwitchLook = 'ios' | 'android' | 'material' | 'default';\n\nexport const lookOf = (variant?: string): SwitchLook => {\n  if (variant === 'ios') return 'ios';\n  if (variant === 'android') return 'android';\n  if (variant === 'material') return 'material';\n  return 'default';\n};\n\n/** Track geometry once the caller's overrides and the size preset are combined. */\nexport const geometryOf = (size: SizeValue | undefined, width?: number, height?: number): SwitchGeometry => {\n  const preset = SWITCH_SIZES[size as SizeValue] ?? SWITCH_SIZES.md;\n  return { ...preset, width: width || preset.width, height: height || preset.height };\n};\n\n/**\n * The thumb's corner. `'50%'` is what the web emits; a renderer with no\n * percentage radius asks {@link thumbRadius} for the px instead.\n */\nexport const THUMB_RADIUS: Record<SwitchLook, (thumbSize: number) => number | string> = {\n  ios: () => '50%',\n  android: () => 4,\n  material: (thumbSize) => thumbSize / 3,\n  default: () => '50%',\n};\n\nexport const TRACK_RADIUS: Record<SwitchLook, (height: number) => number> = {\n  ios: (height) => height / 2,\n  android: (height) => height / 3,\n  material: (height) => height / 2.5,\n  default: (height) => height / 2,\n};\n\n/** The web's `'50%'` as the px a circle of this size needs. */\nexport const thumbRadius = (look: SwitchLook, thumbSize: number): number => {\n  const radius = THUMB_RADIUS[look](thumbSize);\n  return typeof radius === 'number' ? radius : thumbSize / 2;\n};\n\n/**\n * The elevation the thumb rests at per look — an INDEX into `theme.shadows`,\n * not the shadow itself, so a host that re-themes MUI's elevations keeps\n * moving the web. {@link MUI_SHADOWS} carries MUI's own values for the native\n * side, which has no `theme.shadows` to read.\n */\nexport const THUMB_ELEVATION: Record<SwitchLook, number> = { ios: 0, android: 3, material: 2, default: 2 };\n\nexport const MUI_SHADOWS: Record<number, string> = {\n  2: ELEVATION_SHADOWS[2],\n  3: ELEVATION_SHADOWS[3],\n};\n\n/** The iOS thumb's own three-layer shadow, which the web writes out literally. */\nexport const IOS_THUMB_SHADOW = `0 3px 1px 0 ${alpha(SWITCH_BLACK, 0.04)}, 0 3px 8px 0 ${alpha(SWITCH_BLACK, 0.12)}, 0 1px 0 0 ${alpha(SWITCH_BLACK, 0.08)}`;\n\n/** The iOS track's inset hairline. */\nexport const iosTrackShadow = (): string =>\n  `inset 0 0 0 0.5px ${alpha(SWITCH_BLACK, 0.1)}, inset 0 2px 3px ${alpha(SWITCH_BLACK, 0.12)}`;\n\n/** The resting track: a black wash on iOS, the disabled ink elsewhere. */\nexport const TRACK_ALPHA = { ios: 0.1, android: 0.2, other: 0.3 } as const;\n\n/**\n * `black` is MUI's `palette.common.black` on the web and {@link SWITCH_BLACK}\n * on native, whose theme has no `common` — the same `#000` either way, passed\n * in rather than assumed so a host that themes it still moves the web.\n */\nexport const trackColor = (ink: { black: string; disabled: string }, look: SwitchLook): string => {\n  if (look === 'ios') return alpha(ink.black, TRACK_ALPHA.ios);\n  const strength = look === 'android' ? TRACK_ALPHA.android : TRACK_ALPHA.other;\n  return alpha(ink.disabled, strength);\n};\n\n/** How far the thumb travels, and where it starts. iOS insets differently. */\nexport const thumbTravel = (look: SwitchLook, geometry: SwitchGeometry): { rest: number; travel: number } => {\n  const { width, thumbSize, padding } = geometry;\n  if (look === 'ios') {\n    // The web nudges the whole switch base 2px right and shortens the trip.\n    return { rest: padding + IOS_BASE_OFFSET, travel: width - thumbSize - IOS_TRAVEL_INSET };\n  }\n  return { rest: padding, travel: width - thumbSize - padding * 2 };\n};\n\nexport const IOS_BASE_OFFSET = 2;\nexport const IOS_TRAVEL_INSET = 4;\n\n/** MUI's 300ms `cubic-bezier(0.4, 0, 0.2, 1)`, on everything the switch moves. */\nexport const SWITCH_TRANSITION = { ms: 300, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' } as const;\n\n/** The disabled treatment: the thumb greys and the track fades. */\nexport const DISABLED = { trackOpacity: 0.3, checkedTrackOpacity: 0.5, thumbGrey: 100 } as const;\n\n/** `glass`: a paper wash under a blur, inside a faint divider hairline. */\nexport const SWITCH_GLASS = {\n  trackAlpha: 0.1,\n  thumbAlpha: 0.9,\n  borderAlpha: 0.2,\n  trackBlur: 20,\n  thumbBlur: 10,\n} as const;\n\n/** `gradient`: the checked track runs light → main → dark; the resting one is fainter. */\nexport const SWITCH_GRADIENT = {\n  checked: { angleDeg: 90, stops: [0, 50, 100] },\n  resting: { angleDeg: 135, lightAlpha: 0.3, mainAlpha: 0.2 },\n  shimmerMs: 3000,\n} as const;\n\n/** `glow`: a halo of the hue around the checked track, breathing every two seconds. */\nexport const SWITCH_GLOW = { blur: 10, alpha: 0.6, insetBlur: 10, insetAlpha: 0.2, ms: 2000 } as const;\n\n/** `pulse`: the thumb breathes; `ripple`: a wash of the hue expands under the pointer. */\nexport const SWITCH_PULSE = { ms: 2000, minOpacity: 0.7, minScale: 0.95 } as const;\nexport const SWITCH_RIPPLE = { alpha: 0.2, ms: 600, scale: 2 } as const;\n\n/** `loading`: a 2px ring inside the thumb, turning once a second. */\nexport const SWITCH_SPINNER = { sizeRatio: 0.6, borderWidth: 2, ms: 1000 } as const;\n\n/** The two icons overlaid on the track, at their own size per step of the scale. */\nexport const SWITCH_ICON_SIZES: Record<SizeValue, number> = { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 };\n/** Where a shown icon sits, and how small a hidden one is drawn. */\nexport const SWITCH_ICON = { inset: 4, hiddenScale: 0.8 } as const;\n\n/** The wording the `label` variant prints inside the track: 0.75rem at 500, 8px in. */\nexport const TRACK_LABEL = { fontSize: 12, fontWeight: 500, insetUnits: 1 } as const;\n\n/** MUI's `body2` for the label, `caption` for the description and the helper text. */\nexport const SWITCH_LABEL = { fontSize: 14, lineHeight: 1.43, fontWeight: 500 } as const;\nexport const SWITCH_DESCRIPTION = { fontSize: 12, lineHeight: 1.66, marginTopUnits: 0.5 } as const;\nexport const SWITCH_HELPER = { fontSize: 12, lineHeight: 1.66, marginTopUnits: 1 } as const;\n\n/** The label row: 16px from the control beside it, 8px above or below it. */\nexport const LABEL_GAP_UNITS = { beside: 2, stacked: 1 } as const;\n\n/**\n * The minimum height of a touch target, in px (FUT-1905).\n *\n * No entry in {@link SWITCH_SIZES} reaches it — `xl`, the largest, is 34px tall\n * and `md` is 26 — so a consumer cannot buy a legal target by passing a bigger\n * `size`. The label is what clears it: see `SwitchLabel` in `Switch.parts.tsx`.\n */\nexport const TAP_TARGET_MIN = 40;\n\n/**\n * `neutral`'s three greys, and the literals the web falls back to for a theme\n * whose grey ramp omits a step. Same three steps `Button` draws its neutral\n * from.\n */\nexport const NEUTRAL_GREY = { main: 700, dark: 800, light: 500 } as const;\nexport const NEUTRAL_FALLBACK = {\n  main: NEUTRAL_RAMP[NEUTRAL_GREY.main],\n  dark: NEUTRAL_RAMP[NEUTRAL_GREY.dark],\n  light: NEUTRAL_RAMP[NEUTRAL_GREY.light],\n} as const;\nexport const NEUTRAL_CONTRAST = ABSOLUTE_INK.white;\n\n/**\n * The RESTING thumb — the knob while the switch is off (FUT-1924).\n *\n * It stays white, and the reason is worth stating because the checked thumb no\n * longer is: the resting track is `theme.palette.action.disabled` washed over\n * the page, which no tenant picks, and a white knob on it is the conventional\n * look in both modes. The CHECKED track is `palette.main`, a colour the tenant\n * does pick, and that is where a stated white was a defect. See `checkedInk`\n * in `Switch.styles.ts` and its native twin.\n */\nexport const RESTING_THUMB = ABSOLUTE_INK.white;\n\n/** Hover: the thumb lifts a shade and takes a halo of the hue. */\nexport const SWITCH_HOVER = { thumbScale: 1.05, elevation: 4, blur: 12, alpha: 0.2 } as const;\n\n/** Focus: MUI rings the thumb rather than moving it. */\nexport const SWITCH_FOCUS_RING = { width: 6, alpha: 0.2 } as const;\n\n/** A duration as the CSS the web has always emitted: `2000` → `2s`. */\nexport const seconds = (ms: number): string => `${ms / 1000}s`;\n\n/** Whether this variant prints its wording inside the track. */\nexport const showsTrackLabels = (variant: SwitchVariant | undefined, onText?: string, offText?: string): boolean =>\n  variant === 'label' && Boolean(onText ?? offText);\n"],"mappings":"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","names":[]}

package/dist/chunk-D6RKXNLE.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  ToggleGroup
+} from "./chunk-7QLHYUDW.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-IPPTOL53.js";
+
+// src/components/form/total-form/Fields/ToggleField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ToggleField({ name, options, label }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        variant: "exclusive",
+        options,
+        value: values[name] ?? "",
+        fullWidth: true,
+        dataTestId: testId,
+        onChange: (_event, next) => {
+          if (typeof next === "string") setFieldValue(name, next);
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  ToggleField
+};
+//# sourceMappingURL=chunk-D6RKXNLE.js.map