@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-SMCLG2RA.js

@@ -0,0 +1,153 @@
+import {
+  dynamicViewportHeight
+} from "./chunk-AKZWDZCZ.js";
+
+// src/components/feedback/StackedModal/StackedModal.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var STYLE_ONLY_PROPS = ["modalRole", "isAnimating", "glass", "rtl", "customMaxWidth"];
+var MAX_WIDTH_PX = {
+  xs: 444,
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920
+};
+var BACKDROP_BY_ROLE = {
+  secondary: "rgba(0, 0, 0, 0.3)",
+  background: "rgba(0, 0, 0, 0.1)"
+};
+var ANIMATION_BY_ROLE = {
+  secondary: "expandModal 300ms ease-in-out forwards",
+  primary: "contractModal 300ms ease-in-out forwards"
+};
+var KEYFRAMES = {
+  "@keyframes expandModal": {
+    from: { width: "60vw", transform: "translateX(0)" },
+    to: { width: "100vw", transform: "translateX(0)" }
+  },
+  "@keyframes contractModal": {
+    from: { width: "100vw", transform: "translateX(0)" },
+    to: { width: "60vw", transform: "translateX(0)" }
+  }
+};
+var cap = (customMaxWidth) => customMaxWidth ? MAX_WIDTH_PX[customMaxWidth] : null;
+var panelWidth = (share, capPx) => capPx ? { width: `min(${share}, ${capPx}px)`, maxWidth: `${capPx}px` } : { width: share, maxWidth: share };
+var backdropStyles = (modalRole) => ({
+  backgroundColor: (modalRole && BACKDROP_BY_ROLE[modalRole]) ?? "rgba(0, 0, 0, 0.5)",
+  backdropFilter: modalRole === "primary" ? "blur(4px)" : "none"
+});
+var primaryPanelStyles = (theme, capPx) => ({
+  [theme.breakpoints.down("sm")]: panelWidth("100%", capPx),
+  [theme.breakpoints.between("sm", "lg")]: panelWidth("80vw", capPx),
+  [theme.breakpoints.up("lg")]: panelWidth("60vw", capPx),
+  "@media (min-width:2200px)": panelWidth("40vw", capPx)
+});
+var secondaryPanelStyles = () => ({
+  width: "100vw !important",
+  maxWidth: "100vw !important",
+  right: "0 !important",
+  top: "0 !important",
+  ...dynamicViewportHeight("height", "maxHeight"),
+  borderRadius: "0 !important",
+  opacity: 0.95,
+  transform: "scale(1)"
+});
+var rolePanelStyles = (theme, role, capPx) => {
+  if (role === "primary") return primaryPanelStyles(theme, capPx);
+  if (role === "secondary") return secondaryPanelStyles();
+  if (role === "background") return { display: "none" };
+  return {};
+};
+var glassStyles = (theme, glass, role) => glass && role === "primary" ? {
+  backgroundColor: alpha(theme.palette.background.paper, 0.85),
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
+} : {};
+var animationStyles = (isAnimating, role) => isAnimating ? { animation: (role && ANIMATION_BY_ROLE[role]) ?? "none" } : {};
+var panelBaseStyles = (theme) => ({
+  margin: 0,
+  position: "fixed",
+  right: 0,
+  top: 0,
+  // Pinned to the DYNAMIC viewport: on iOS a `100vh` panel runs underneath the
+  // browser toolbar, which parks the tail of the scroll area (the submit row)
+  // out of reach. See `dynamicViewportHeight`.
+  ...dynamicViewportHeight("height", "maxHeight"),
+  borderRadius: 0,
+  willChange: "transform, width, border-radius",
+  transition: theme.transitions.create(
+    ["width", "max-width", "border-radius", "transform", "opacity"],
+    { duration: 300, easing: theme.transitions.easing.easeInOut }
+  )
+});
+var panelStyles = (theme, props) => {
+  const capPx = cap(props.customMaxWidth);
+  return {
+    ...panelBaseStyles(theme),
+    ...rolePanelStyles(theme, props.modalRole, capPx),
+    ...glassStyles(theme, props.glass, props.modalRole),
+    ...animationStyles(props.isAnimating, props.modalRole)
+  };
+};
+var dialogRootStyles = (theme, props) => ({
+  direction: props.rtl ? "rtl" : "ltr",
+  "& .MuiBackdrop-root": backdropStyles(props.modalRole),
+  "& .MuiDialog-container": { alignItems: "flex-start", justifyContent: "flex-end" },
+  "& .MuiDialog-paper": panelStyles(theme, props),
+  ...KEYFRAMES
+});
+var titleStyles = (theme, rtl) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: theme.spacing(2, 2.5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  direction: rtl ? "rtl" : "ltr"
+});
+var titleLeftStyles = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  flex: 1
+});
+var titleRightStyles = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+});
+var loadingOverlayStyles = (theme) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: alpha(theme.palette.background.paper, 0.8),
+  zIndex: 9999
+});
+var modalContentStyles = (theme) => ({
+  padding: theme.spacing(3),
+  // MUI's DialogContent defaults to `overflow-y: auto`, but inside a panel it is
+  // NOT the element that scrolls — ModalBody above it is, and this box always
+  // ends up exactly as tall as its own content. A scroll container that never
+  // scrolls is still the containing block for every `position: sticky`
+  // descendant, so a sticky header anchored here gets zero travel and rides the
+  // content out of view: sticky, and pinned to nothing. Handing the overflow
+  // back to ModalBody makes the panel's own scroller the anchor.
+  overflowY: "visible"
+});
+
+export {
+  STYLE_ONLY_PROPS,
+  dialogRootStyles,
+  titleStyles,
+  titleLeftStyles,
+  titleRightStyles,
+  loadingOverlayStyles,
+  modalContentStyles
+};
+//# sourceMappingURL=chunk-SMCLG2RA.js.map

package/dist/chunk-SMCLG2RA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/StackedModal/StackedModal.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { dynamicViewportHeight } from '../../../utils/viewport';\nimport type { ModalPanelRole, PanelMaxWidth } from './StackedModal.types';\n\n/** Props that drive the panel's look but must not reach the DOM. */\nexport interface PanelStyleProps {\n  modalRole?: ModalPanelRole;\n  isAnimating?: boolean;\n  glass?: boolean;\n  rtl?: boolean;\n  customMaxWidth?: PanelMaxWidth;\n}\n\n/** Style-only props, filtered out before they can land on a DOM node. */\nexport const STYLE_ONLY_PROPS = ['modalRole', 'isAnimating', 'glass', 'rtl', 'customMaxWidth'];\n\n/** MUI breakpoint names mapped to the pixel width they cap the panel at. */\nconst MAX_WIDTH_PX: Record<Exclude<PanelMaxWidth, false>, number> = {\n  xs: 444,\n  sm: 600,\n  md: 960,\n  lg: 1280,\n  xl: 1920,\n};\n\nconst BACKDROP_BY_ROLE: Partial<Record<ModalPanelRole, string>> = {\n  secondary: 'rgba(0, 0, 0, 0.3)',\n  background: 'rgba(0, 0, 0, 0.1)',\n};\n\nconst ANIMATION_BY_ROLE: Partial<Record<ModalPanelRole, string>> = {\n  secondary: 'expandModal 300ms ease-in-out forwards',\n  primary: 'contractModal 300ms ease-in-out forwards',\n};\n\n// Animation endpoints use the common lg width (60vw); the role styles set the\n// exact per-breakpoint width once the animation settles.\nconst KEYFRAMES: CSSObject = {\n  '@keyframes expandModal': {\n    from: { width: '60vw', transform: 'translateX(0)' },\n    to: { width: '100vw', transform: 'translateX(0)' },\n  },\n  '@keyframes contractModal': {\n    from: { width: '100vw', transform: 'translateX(0)' },\n    to: { width: '60vw', transform: 'translateX(0)' },\n  },\n};\n\nconst cap = (customMaxWidth?: PanelMaxWidth): number | null =>\n  customMaxWidth ? MAX_WIDTH_PX[customMaxWidth] : null;\n\n/** One breakpoint's width: the viewport share, held under the optional px cap. */\nconst panelWidth = (share: string, capPx: number | null): CSSObject =>\n  capPx\n    ? { width: `min(${share}, ${capPx}px)`, maxWidth: `${capPx}px` }\n    : { width: share, maxWidth: share };\n\nconst backdropStyles = (modalRole?: ModalPanelRole): CSSObject => ({\n  backgroundColor: (modalRole && BACKDROP_BY_ROLE[modalRole]) ?? 'rgba(0, 0, 0, 0.5)',\n  backdropFilter: modalRole === 'primary' ? 'blur(4px)' : 'none',\n});\n\n/**\n * The top panel is viewport-aware and narrows as the screen grows: full width on\n * mobile, 80vw on tablet/small desktop, 60vw on regular desktops (lg up —\n * including ~1080p/1440p/1080-wide), and 40vw only on ultra-wide screens\n * (≥2200px) so the receding panel stays visible on huge monitors. A `maxWidth`\n * prop, when given, caps it further.\n */\nconst primaryPanelStyles = (theme: Theme, capPx: number | null): CSSObject => ({\n  [theme.breakpoints.down('sm')]: panelWidth('100%', capPx),\n  [theme.breakpoints.between('sm', 'lg')]: panelWidth('80vw', capPx),\n  [theme.breakpoints.up('lg')]: panelWidth('60vw', capPx),\n  '@media (min-width:2200px)': panelWidth('40vw', capPx),\n});\n\n/** Panels below the top one expand to full width, producing the GTM stacking effect. */\nconst secondaryPanelStyles = (): CSSObject => ({\n  width: '100vw !important',\n  maxWidth: '100vw !important',\n  right: '0 !important',\n  top: '0 !important',\n  ...dynamicViewportHeight('height', 'maxHeight'),\n  borderRadius: '0 !important',\n  opacity: 0.95,\n  transform: 'scale(1)',\n});\n\nconst rolePanelStyles = (theme: Theme, role: ModalPanelRole | undefined, capPx: number | null): CSSObject => {\n  if (role === 'primary') return primaryPanelStyles(theme, capPx);\n  if (role === 'secondary') return secondaryPanelStyles();\n  // Background modals stay mounted but hidden, for performance.\n  if (role === 'background') return { display: 'none' };\n  return {};\n};\n\nconst glassStyles = (theme: Theme, glass?: boolean, role?: ModalPanelRole): CSSObject =>\n  glass && role === 'primary'\n    ? {\n        backgroundColor: alpha(theme.palette.background.paper, 0.85),\n        backdropFilter: 'blur(10px)',\n        WebkitBackdropFilter: 'blur(10px)',\n        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n      }\n    : {};\n\nconst animationStyles = (isAnimating?: boolean, role?: ModalPanelRole): CSSObject =>\n  isAnimating ? { animation: (role && ANIMATION_BY_ROLE[role]) ?? 'none' } : {};\n\nconst panelBaseStyles = (theme: Theme): CSSObject => ({\n  margin: 0,\n  position: 'fixed',\n  right: 0,\n  top: 0,\n  // Pinned to the DYNAMIC viewport: on iOS a `100vh` panel runs underneath the\n  // browser toolbar, which parks the tail of the scroll area (the submit row)\n  // out of reach. See `dynamicViewportHeight`.\n  ...dynamicViewportHeight('height', 'maxHeight'),\n  borderRadius: 0,\n  willChange: 'transform, width, border-radius',\n  transition: theme.transitions.create(\n    ['width', 'max-width', 'border-radius', 'transform', 'opacity'],\n    { duration: 300, easing: theme.transitions.easing.easeInOut },\n  ),\n});\n\nconst panelStyles = (theme: Theme, props: PanelStyleProps): CSSObject => {\n  const capPx = cap(props.customMaxWidth);\n  return {\n    ...panelBaseStyles(theme),\n    ...rolePanelStyles(theme, props.modalRole, capPx),\n    ...glassStyles(theme, props.glass, props.modalRole),\n    ...animationStyles(props.isAnimating, props.modalRole),\n  };\n};\n\n/** The full rule set for the sliding panel's Dialog root. */\nexport const dialogRootStyles = (theme: Theme, props: PanelStyleProps): CSSObject => ({\n  direction: props.rtl ? 'rtl' : 'ltr',\n  '& .MuiBackdrop-root': backdropStyles(props.modalRole),\n  '& .MuiDialog-container': { alignItems: 'flex-start', justifyContent: 'flex-end' },\n  '& .MuiDialog-paper': panelStyles(theme, props),\n  ...KEYFRAMES,\n});\n\nexport const titleStyles = (theme: Theme, rtl?: boolean): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(2, 2.5),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  direction: rtl ? 'rtl' : 'ltr',\n});\n\nexport const titleLeftStyles = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  flex: 1,\n});\n\nexport const titleRightStyles = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n});\n\nexport const loadingOverlayStyles = (theme: Theme): CSSObject => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: alpha(theme.palette.background.paper, 0.8),\n  zIndex: 9999,\n});\n\nexport const modalContentStyles = (theme: Theme): CSSObject => ({\n  padding: theme.spacing(3),\n  // MUI's DialogContent defaults to `overflow-y: auto`, but inside a panel it is\n  // NOT the element that scrolls — ModalBody above it is, and this box always\n  // ends up exactly as tall as its own content. A scroll container that never\n  // scrolls is still the containing block for every `position: sticky`\n  // descendant, so a sticky header anchored here gets zero travel and rides the\n  // content out of view: sticky, and pinned to nothing. Handing the overflow\n  // back to ModalBody makes the panel's own scroller the anchor.\n  overflowY: 'visible',\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-SNR537TI.js

@@ -0,0 +1,59 @@
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-glyphs.tsx
+import { jsx } from "react/jsx-runtime";
+var FRAME = { width: 32, height: 24, display: "flex" };
+function barColor(active) {
+  return active ? "primary.main" : "action.disabled";
+}
+function RowsGlyph({ gap, active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, flexDirection: "column", justifyContent: "center", gap: `${gap}px` }, children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(default2, { sx: { height: 2, width: "100%", borderRadius: 1, bgcolor: barColor(active) } }, index)) });
+}
+function TableGlyph({ active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "2px" }, children: Array.from({ length: 9 }).map((_, index) => /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: { borderRadius: 0.5, bgcolor: barColor(active), opacity: index < 3 ? 1 : 0.55 }
+    },
+    index
+  )) });
+}
+function ListGlyph({ active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, flexDirection: "column", justifyContent: "center", gap: "4px" }, children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        height: 5,
+        width: "100%",
+        borderRadius: 0.5,
+        bgcolor: barColor(active),
+        opacity: 0.7,
+        display: "flex",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ jsx(default2, { sx: { ml: "2px", height: 3, width: 3, borderRadius: "50%", bgcolor: "background.paper" } })
+    },
+    index
+  )) });
+}
+function GridGlyph({ n = 3, active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, display: "grid", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: "2px" }, children: Array.from({ length: n * 2 }).map((_, index) => /* @__PURE__ */ jsx(default2, { sx: { borderRadius: 0.5, bgcolor: barColor(active) } }, index)) });
+}
+function ColumnsGlyph({ n, active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, gap: "2px" }, children: Array.from({ length: n }).map((_, column) => /* @__PURE__ */ jsx(default2, { sx: { flex: 1, borderRadius: 0.5, bgcolor: barColor(active) } }, column)) });
+}
+function BoardGlyph({ active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, gap: "2px" }, children: [3, 2, 1].map((count, column) => /* @__PURE__ */ jsx(default2, { sx: { flex: 1, display: "flex", flexDirection: "column", gap: "2px" }, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(default2, { sx: { height: 5, borderRadius: 0.5, bgcolor: barColor(active) } }, index)) }, column)) });
+}
+
+export {
+  RowsGlyph,
+  TableGlyph,
+  ListGlyph,
+  GridGlyph,
+  ColumnsGlyph,
+  BoardGlyph
+};
+//# sourceMappingURL=chunk-SNR537TI.js.map

package/dist/chunk-SNR537TI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-glyphs.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box } from \"../../../mui/Box\";\n\n/**\n * Miniature previews of what a layout or a density setting DOES.\n *\n * \"Baixa / Média / Alta\" tells an operator nothing until they try it, and\n * \"Grade\" vs \"Lista\" is only obvious to whoever named them. A glyph that draws\n * three tight rows, or three loose ones, or a grid of blocks, answers the\n * question before the click — so the picker is read once instead of cycled\n * through.\n *\n * Deliberately CSS boxes rather than icons: the point is to show spacing and\n * proportion, which is exactly what an icon font flattens away.\n */\n\n/** The glyph's own footprint, so every tile in a picker lines up. */\nconst FRAME = { width: 32, height: 24, display: \"flex\" } as const;\n\n/** Active tiles use the accent; the rest stay muted so the choice reads at a glance. */\nfunction barColor(active: boolean): string {\n  return active ? \"primary.main\" : \"action.disabled\";\n}\n\n/** Three rows at a given gap — the density preview for the table and list. */\nexport function RowsGlyph({ gap, active }: { gap: number; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, flexDirection: \"column\", justifyContent: \"center\", gap: `${gap}px` }}>\n      {[0, 1, 2].map((index) => (\n        <Box key={index} sx={{ height: 2, width: \"100%\", borderRadius: 1, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/** A dense block grid — the table layout. */\nexport function TableGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: \"2px\" }}>\n      {Array.from({ length: 9 }).map((_, index) => (\n        <Box\n          key={index}\n          sx={{ borderRadius: 0.5, bgcolor: barColor(active), opacity: index < 3 ? 1 : 0.55 }}\n        />\n      ))}\n    </Box>\n  );\n}\n\n/** Full-width rows each carrying a leading mark — the list layout. */\nexport function ListGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, flexDirection: \"column\", justifyContent: \"center\", gap: \"4px\" }}>\n      {[0, 1, 2].map((index) => (\n        <Box\n          key={index}\n          sx={{\n            height: 5,\n            width: \"100%\",\n            borderRadius: 0.5,\n            bgcolor: barColor(active),\n            opacity: 0.7,\n            display: \"flex\",\n            alignItems: \"center\",\n          }}\n        >\n          <Box sx={{ ml: \"2px\", height: 3, width: 3, borderRadius: \"50%\", bgcolor: \"background.paper\" }} />\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\n/**\n * A grid of blocks — the cards layout, and ALSO the cards density preview: `n`\n * is how many fit per row, so \"Muitos / Médio / Poucos\" is shown rather than\n * described.\n */\nexport function GridGlyph({ n = 3, active }: { n?: number; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, display: \"grid\", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: \"2px\" }}>\n      {Array.from({ length: n * 2 }).map((_, index) => (\n        <Box key={index} sx={{ borderRadius: 0.5, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/**\n * Full-height columns, `n` of them — the board's DENSITY, where fewer, wider\n * columns is the comfortable end. Distinct from {@link BoardGlyph}, which\n * stands for the board format itself and shows cards stacked at differing\n * depths; this one is about the columns' width, so the bars are solid.\n */\nexport function ColumnsGlyph({ n, active }: { n: number; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, gap: \"2px\" }}>\n      {Array.from({ length: n }).map((_, column) => (\n        <Box key={column} sx={{ flex: 1, borderRadius: 0.5, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/** Three columns of decreasing height — the board. */\nexport function BoardGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, gap: \"2px\" }}>\n      {[3, 2, 1].map((count, column) => (\n        <Box key={column} sx={{ flex: 1, display: \"flex\", flexDirection: \"column\", gap: \"2px\" }}>\n          {Array.from({ length: count }).map((_, index) => (\n            <Box key={index} sx={{ height: 5, borderRadius: 0.5, bgcolor: barColor(active) }} />\n          ))}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-SQAU5QUY.js

@@ -0,0 +1,240 @@
+import {
+  glowAnimation,
+  rippleAnimation,
+  scaleAnimation,
+  slideAnimation
+} from "./chunk-65CEXQ4L.js";
+
+// src/components/form/RadioGroup/RadioGroup.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var neutralPalette = (theme) => ({
+  main: theme.palette.grey?.[700] || "#616161",
+  dark: theme.palette.grey?.[800] || "#424242",
+  light: theme.palette.grey?.[500] || "#9e9e9e",
+  contrastText: "#fff"
+});
+var namedPalette = (theme, color) => {
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || "#fff"
+  };
+};
+var pickSize = (map, size) => map[size] ?? map.md;
+var CARD_SIZES = {
+  xs: { padding: "8px", minHeight: "60px" },
+  sm: { padding: "12px", minHeight: "70px" },
+  md: { padding: "16px", minHeight: "80px" },
+  lg: { padding: "20px", minHeight: "90px" },
+  xl: { padding: "24px", minHeight: "100px" }
+};
+var BUTTON_SIZES = {
+  xs: { padding: "6px 12px", fontSize: "0.75rem", minHeight: "32px" },
+  sm: { padding: "8px 16px", fontSize: "0.875rem", minHeight: "36px" },
+  md: { padding: "10px 20px", fontSize: "1rem", minHeight: "40px" },
+  lg: { padding: "12px 24px", fontSize: "1.125rem", minHeight: "44px" },
+  xl: { padding: "14px 28px", fontSize: "1.25rem", minHeight: "48px" }
+};
+var SEGMENT_SIZES = {
+  xs: { padding: "4px 8px", fontSize: "0.75rem" },
+  sm: { padding: "6px 12px", fontSize: "0.875rem" },
+  md: { padding: "8px 16px", fontSize: "1rem" },
+  lg: { padding: "10px 20px", fontSize: "1.125rem" },
+  xl: { padding: "12px 24px", fontSize: "1.25rem" }
+};
+var formLabelSx = (theme, glass, error) => ({
+  marginBottom: theme.spacing(2),
+  fontWeight: 600,
+  color: error ? theme.palette.error.main : theme.palette.text.primary,
+  ...glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(10px)",
+    padding: "8px 12px",
+    borderRadius: "8px",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    display: "inline-block"
+  }
+});
+var cardBase = (theme, flags, palette) => {
+  const { selected, animated, customSize = "md" } = flags;
+  return {
+    cursor: "pointer",
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    border: `2px solid ${selected ? palette.main : alpha(theme.palette.divider, 0.3)}`,
+    backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,
+    position: "relative",
+    overflow: "hidden",
+    ...animated && { animation: `${slideAnimation} 0.4s ease-out` },
+    // A radial wash that grows from the centre as the card is selected or hovered.
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: selected ? "100%" : "0",
+      height: selected ? "100%" : "0",
+      background: `radial-gradient(circle, ${alpha(palette.main, 0.1)} 0%, transparent 70%)`,
+      transform: "translate(-50%, -50%)",
+      transition: "all 0.5s ease",
+      borderRadius: "50%"
+    },
+    "&:hover": {
+      borderColor: palette.main,
+      backgroundColor: alpha(palette.main, 0.02),
+      transform: "translateY(-2px) scale(1.02)",
+      boxShadow: `${theme.shadows[4]}, 0 10px 30px -5px ${alpha(palette.main, 0.2)}`,
+      "&::before": { width: "120%", height: "120%" }
+    },
+    "&:active": { transform: "scale(0.98)" },
+    ...pickSize(CARD_SIZES, customSize)
+  };
+};
+var radioCardSx = (theme, flags) => {
+  const { selected, customColor = "primary", glass, gradient, glow } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  return {
+    ...cardBase(theme, flags, palette),
+    ...glass && {
+      backgroundColor: selected ? alpha(palette.main, 0.1) : alpha(theme.palette.background.paper, 0.1),
+      backdropFilter: "blur(20px)",
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+    },
+    ...gradient && selected && {
+      background: `linear-gradient(135deg, ${alpha(palette.main, 0.1)}, ${alpha(palette.light || palette.main, 0.05)})`,
+      borderColor: palette.main
+    },
+    ...glow && selected && {
+      animation: `${glowAnimation} 2s ease-in-out infinite`,
+      boxShadow: `0 0 15px ${alpha(palette.main, 0.4)}`
+    }
+  };
+};
+var buttonBase = (theme, flags, palette) => {
+  const { selected, animated, customSize = "md" } = flags;
+  return {
+    borderRadius: theme.spacing(1),
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    fontWeight: 500,
+    border: `2px solid ${selected ? palette.main : alpha(theme.palette.divider, 0.5)}`,
+    backgroundColor: selected ? palette.main : "transparent",
+    color: selected ? palette.contrastText || "#fff" : theme.palette.text.primary,
+    position: "relative",
+    overflow: "hidden",
+    ...animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` },
+    // Sized to zero until pressed, when the ripple keyframes expand it.
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: 0,
+      height: 0,
+      borderRadius: "50%",
+      backgroundColor: alpha(palette.contrastText || "#fff", 0.3),
+      transform: "translate(-50%, -50%)",
+      pointerEvents: "none"
+    },
+    "&:active::after": {
+      animation: `${rippleAnimation} 0.6s ease-out`,
+      width: "100%",
+      height: "100%"
+    },
+    "&:hover": {
+      borderColor: palette.main,
+      backgroundColor: selected ? palette.dark : alpha(palette.main, 0.1),
+      transform: "translateY(-1px) scale(1.02)",
+      boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`
+    },
+    "&:active": { transform: "scale(0.98)" },
+    ...pickSize(BUTTON_SIZES, customSize)
+  };
+};
+var buttonRadioSx = (theme, flags) => {
+  const { selected, customColor = "primary", glass, gradient } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  return {
+    ...buttonBase(theme, flags, palette),
+    ...glass && {
+      backgroundColor: selected ? alpha(palette.main, 0.8) : alpha(theme.palette.background.paper, 0.1),
+      backdropFilter: "blur(20px)",
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+    },
+    ...gradient && selected && {
+      background: `linear-gradient(135deg, ${palette.main}, ${palette.dark})`,
+      border: "none"
+    }
+  };
+};
+var segmentContainerSx = (theme, glass, customColor = "primary") => {
+  const palette = getColorFromTheme(theme, customColor);
+  return {
+    padding: "4px",
+    borderRadius: theme.spacing(1.5),
+    backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : alpha(palette.main, 0.05),
+    backdropFilter: glass ? "blur(20px)" : "none",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    display: "flex",
+    gap: "2px"
+  };
+};
+var segmentUnderline = (color, selected) => ({
+  content: '""',
+  position: "absolute",
+  bottom: 0,
+  left: selected ? 0 : "50%",
+  width: selected ? "100%" : 0,
+  height: "2px",
+  backgroundColor: color,
+  transition: "all 0.3s ease",
+  transform: selected ? "translateX(0)" : "translateX(-50%)"
+});
+var segmentButtonSx = (theme, flags) => {
+  const { selected, customColor = "primary", customSize = "md", animated } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  return {
+    flex: 1,
+    borderRadius: theme.spacing(1),
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    fontWeight: 500,
+    backgroundColor: selected ? theme.palette.background.paper : "transparent",
+    color: selected ? palette.main : theme.palette.text.secondary,
+    boxShadow: selected ? `${theme.shadows[2]}, inset 0 1px 3px ${alpha(palette.main, 0.1)}` : "none",
+    position: "relative",
+    overflow: "hidden",
+    ...animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` },
+    "&::before": segmentUnderline(palette.main, Boolean(selected)),
+    "&:hover": {
+      backgroundColor: selected ? theme.palette.background.paper : alpha(theme.palette.action.hover, 0.08),
+      color: palette.main,
+      "&::before": { width: "100%", left: 0, transform: "translateX(0)" }
+    },
+    "&:active": { transform: "scale(0.98)" },
+    ...pickSize(SEGMENT_SIZES, customSize)
+  };
+};
+
+export {
+  formLabelSx,
+  radioCardSx,
+  buttonRadioSx,
+  segmentContainerSx,
+  segmentButtonSx
+};
+//# sourceMappingURL=chunk-SQAU5QUY.js.map

package/dist/chunk-SQAU5QUY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RadioGroup/RadioGroup.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from './RadioGroup.animations';\n\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/**\n * `neutral` is not a MUI palette entry, so it is built from the grey ramp. The\n * literal fallbacks cover a theme whose grey ramp has been replaced with one\n * that omits these steps.\n */\nconst neutralPalette = (theme: Theme): ColorPalette => ({\n  main: theme.palette.grey?.[700] || '#616161',\n  dark: theme.palette.grey?.[800] || '#424242',\n  light: theme.palette.grey?.[500] || '#9e9e9e',\n  contrastText: '#fff',\n});\n\n/** `danger` is this component's name for the error palette; the rest map straight through. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n  const colorMap: Record<string, ColorPalette> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\n/**\n * Resolves a colour name to a full palette, filling any step the theme leaves\n * out from `main` and then from the primary palette. Split into three so the\n * fallback chains do not all count against one function.\n */\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const palette = namedPalette(theme, color);\n  const { primary } = theme.palette;\n\n  // namedPalette always yields a palette, so these need no optional chaining;\n  // each step still falls back to `main` and then to primary when the theme\n  // leaves it out.\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || '#fff',\n  };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst pickSize = <T,>(map: Record<SizeKey, T>, size: string): T => map[size as SizeKey] ?? map.md;\n\nconst CARD_SIZES: Record<SizeKey, CSSObject> = {\n  xs: { padding: '8px', minHeight: '60px' },\n  sm: { padding: '12px', minHeight: '70px' },\n  md: { padding: '16px', minHeight: '80px' },\n  lg: { padding: '20px', minHeight: '90px' },\n  xl: { padding: '24px', minHeight: '100px' },\n};\n\nconst BUTTON_SIZES: Record<SizeKey, CSSObject> = {\n  xs: { padding: '6px 12px', fontSize: '0.75rem', minHeight: '32px' },\n  sm: { padding: '8px 16px', fontSize: '0.875rem', minHeight: '36px' },\n  md: { padding: '10px 20px', fontSize: '1rem', minHeight: '40px' },\n  lg: { padding: '12px 24px', fontSize: '1.125rem', minHeight: '44px' },\n  xl: { padding: '14px 28px', fontSize: '1.25rem', minHeight: '48px' },\n};\n\nconst SEGMENT_SIZES: Record<SizeKey, CSSObject> = {\n  xs: { padding: '4px 8px', fontSize: '0.75rem' },\n  sm: { padding: '6px 12px', fontSize: '0.875rem' },\n  md: { padding: '8px 16px', fontSize: '1rem' },\n  lg: { padding: '10px 20px', fontSize: '1.125rem' },\n  xl: { padding: '12px 24px', fontSize: '1.25rem' },\n};\n\nexport interface SurfaceFlags {\n  selected?: boolean;\n  customColor?: string;\n  glass?: boolean;\n  gradient?: boolean;\n  glow?: boolean;\n  customSize?: string;\n  animated?: boolean;\n}\n\nexport const formLabelSx = (theme: Theme, glass?: boolean, error?: boolean): CSSObject => ({\n  marginBottom: theme.spacing(2),\n  fontWeight: 600,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(10px)',\n    padding: '8px 12px',\n    borderRadius: '8px',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    display: 'inline-block',\n  }),\n});\n\n/** The card's resting surface, before glass/gradient/glow override parts of it. */\nconst cardBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSSObject => {\n  const { selected, animated, customSize = 'md' } = flags;\n\n  return {\n    cursor: 'pointer',\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    border: `2px solid ${selected ? palette.main : alpha(theme.palette.divider, 0.3)}`,\n    backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    ...(animated && { animation: `${slideAnimation} 0.4s ease-out` }),\n    // A radial wash that grows from the centre as the card is selected or hovered.\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      width: selected ? '100%' : '0',\n      height: selected ? '100%' : '0',\n      background: `radial-gradient(circle, ${alpha(palette.main, 0.1)} 0%, transparent 70%)`,\n      transform: 'translate(-50%, -50%)',\n      transition: 'all 0.5s ease',\n      borderRadius: '50%',\n    },\n    '&:hover': {\n      borderColor: palette.main,\n      backgroundColor: alpha(palette.main, 0.02),\n      transform: 'translateY(-2px) scale(1.02)',\n      boxShadow: `${theme.shadows[4]}, 0 10px 30px -5px ${alpha(palette.main, 0.2)}`,\n      '&::before': { width: '120%', height: '120%' },\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(CARD_SIZES, customSize),\n  };\n};\n\nexport const radioCardSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n  const { selected, customColor = 'primary', glass, gradient, glow } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    ...cardBase(theme, flags, palette),\n    ...(glass && {\n      backgroundColor: selected\n        ? alpha(palette.main, 0.1)\n        : alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    }),\n    ...(gradient &&\n      selected && {\n        background: `linear-gradient(135deg, ${alpha(palette.main, 0.1)}, ${alpha(palette.light || palette.main, 0.05)})`,\n        borderColor: palette.main,\n      }),\n    ...(glow &&\n      selected && {\n        animation: `${glowAnimation} 2s ease-in-out infinite`,\n        boxShadow: `0 0 15px ${alpha(palette.main, 0.4)}`,\n      }),\n  };\n};\n\n/** The pill button's resting surface, before glass/gradient override parts of it. */\nconst buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSSObject => {\n  const { selected, animated, customSize = 'md' } = flags;\n\n  return {\n    borderRadius: theme.spacing(1),\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    fontWeight: 500,\n    border: `2px solid ${selected ? palette.main : alpha(theme.palette.divider, 0.5)}`,\n    backgroundColor: selected ? palette.main : 'transparent',\n    color: selected ? palette.contrastText || '#fff' : theme.palette.text.primary,\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),\n    // Sized to zero until pressed, when the ripple keyframes expand it.\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      width: 0,\n      height: 0,\n      borderRadius: '50%',\n      backgroundColor: alpha(palette.contrastText || '#fff', 0.3),\n      transform: 'translate(-50%, -50%)',\n      pointerEvents: 'none' as const,\n    },\n    '&:active::after': {\n      animation: `${rippleAnimation} 0.6s ease-out`,\n      width: '100%',\n      height: '100%',\n    },\n    '&:hover': {\n      borderColor: palette.main,\n      backgroundColor: selected ? palette.dark : alpha(palette.main, 0.1),\n      transform: 'translateY(-1px) scale(1.02)',\n      boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`,\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(BUTTON_SIZES, customSize),\n  };\n};\n\nexport const buttonRadioSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n  const { selected, customColor = 'primary', glass, gradient } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    ...buttonBase(theme, flags, palette),\n    ...(glass && {\n      backgroundColor: selected\n        ? alpha(palette.main, 0.8)\n        : alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    }),\n    ...(gradient &&\n      selected && {\n        background: `linear-gradient(135deg, ${palette.main}, ${palette.dark})`,\n        border: 'none',\n      }),\n  };\n};\n\nexport const segmentContainerSx = (\n  theme: Theme,\n  glass?: boolean,\n  customColor = 'primary',\n): CSSObject => {\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    padding: '4px',\n    borderRadius: theme.spacing(1.5),\n    backgroundColor: glass\n      ? alpha(theme.palette.background.paper, 0.1)\n      : alpha(palette.main, 0.05),\n    backdropFilter: glass ? 'blur(20px)' : 'none',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    display: 'flex',\n    gap: '2px',\n  };\n};\n\n/**\n * An underline that grows from the centre outwards, and is already full width\n * when the segment is the selected one.\n */\nconst segmentUnderline = (color: string, selected: boolean): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute',\n  bottom: 0,\n  left: selected ? 0 : '50%',\n  width: selected ? '100%' : 0,\n  height: '2px',\n  backgroundColor: color,\n  transition: 'all 0.3s ease',\n  transform: selected ? 'translateX(0)' : 'translateX(-50%)',\n});\n\nexport const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n  const { selected, customColor = 'primary', customSize = 'md', animated } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    flex: 1,\n    borderRadius: theme.spacing(1),\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    fontWeight: 500,\n    backgroundColor: selected ? theme.palette.background.paper : 'transparent',\n    color: selected ? palette.main : theme.palette.text.secondary,\n    boxShadow: selected\n      ? `${theme.shadows[2]}, inset 0 1px 3px ${alpha(palette.main, 0.1)}`\n      : 'none',\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),\n    '&::before': segmentUnderline(palette.main, Boolean(selected)),\n    '&:hover': {\n      backgroundColor: selected\n        ? theme.palette.background.paper\n        : alpha(theme.palette.action.hover, 0.08),\n      color: palette.main,\n      '&::before': { width: '100%', left: 0, transform: 'translateX(0)' },\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(SEGMENT_SIZES, customSize),\n  };\n};\n"],"mappings":"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","names":[]}