@12-apps/ui 6.54.1 → 6.55.0

package/dist/chunk-SOR2KLNR.js

@@ -0,0 +1,174 @@
+import {
+  bounceKeyframes
+} from "./chunk-CIEOLDFN.js";
+import {
+  getScaleDistance
+} from "./chunk-CB6DTWD5.js";
+import {
+  shadowInk
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/MapPreview/MapDecorations.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import NavigationIcon from "@mui/icons-material/Navigation";
+import PlaceIcon from "@mui/icons-material/Place";
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MapRoads = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: "20%", left: "15%", width: "70%", height: "60%", opacity: 0.2 }, children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", style: { position: "absolute" }, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 10,50 Q 30,30 50,50 T 90,50",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "2",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 50,10 L 50,90",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1.5",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 20,30 L 80,70",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1",
+        fill: "none",
+        opacity: "0.2"
+      }
+    )
+  ] }) });
+};
+var DecorativePin = ({ top, left }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top, left, opacity: 0.6 }, children: /* @__PURE__ */ jsx(PlaceIcon, { sx: { fontSize: rem(theme, 20), color: theme.palette.primary.main } }) });
+};
+var MapDecorativePins = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DecorativePin, { top: "30%", left: "25%" }),
+  /* @__PURE__ */ jsx(DecorativePin, { top: "65%", left: "70%" })
+] });
+var MapCentreMarker = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": "map-marker",
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -100%)",
+        zIndex: 2,
+        filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`
+      },
+      children: /* @__PURE__ */ jsx(
+        LocationIcon,
+        {
+          sx: {
+            fontSize: rem(theme, 36),
+            color: theme.palette.error.main,
+            animation: "bounce 2s infinite",
+            "@keyframes bounce": bounceKeyframes(theme)
+          }
+        }
+      )
+    }
+  );
+};
+var MapScaleBar = ({ zoom }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        bottom: theme.spacing(2),
+        right: theme.spacing(2),
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        padding: theme.spacing(0.5, 1),
+        background: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: theme.shape.borderRadius,
+        fontSize: rem(theme, 12),
+        color: theme.palette.text.secondary
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: rem(theme, 40),
+              height: rem(theme, 2),
+              background: theme.palette.text.secondary,
+              position: "relative",
+              // The end caps that make the bar read as a measurement.
+              "&::before, &::after": {
+                content: '""',
+                position: "absolute",
+                width: rem(theme, 2),
+                height: rem(theme, 6),
+                background: theme.palette.text.secondary
+              },
+              "&::before": { left: 0, top: rem(theme, -2) },
+              "&::after": { right: 0, top: rem(theme, -2) }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", children: getScaleDistance(zoom) })
+      ]
+    }
+  );
+};
+var MapCompass = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: theme.spacing(2),
+        left: theme.spacing(2),
+        width: rem(theme, 40),
+        height: rem(theme, 40),
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: "50%",
+        boxShadow: theme.shadows[2]
+      },
+      children: /* @__PURE__ */ jsx(
+        NavigationIcon,
+        {
+          sx: { fontSize: rem(theme, 24), color: theme.palette.primary.main, transform: "rotate(-45deg)" }
+        }
+      )
+    }
+  );
+};
+
+export {
+  MapRoads,
+  MapDecorativePins,
+  MapCentreMarker,
+  MapScaleBar,
+  MapCompass
+};
+//# sourceMappingURL=chunk-SOR2KLNR.js.map

package/dist/chunk-SSDYEOU4.js

@@ -0,0 +1,154 @@
+import {
+  containerStyles,
+  frameBox
+} from "./chunk-Z64TMGYT.js";
+import {
+  CarouselTrack
+} from "./chunk-EMNDJ57M.js";
+import {
+  useCarouselNavigation
+} from "./chunk-RUIV5TVA.js";
+import {
+  CarouselChrome
+} from "./chunk-QCTG7LIX.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+import {
+  muiColor
+} from "./chunk-7ZPUN7TV.js";
+
+// src/components/data-display/Carousel/Carousel.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Slide from "@mui/material/Slide/index.js";
+import Zoom from "@mui/material/Zoom/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "primary",
+  autoPlay: false,
+  autoPlayInterval: 3e3,
+  loop: true,
+  showIndicators: true,
+  showArrows: true,
+  showThumbnails: false,
+  glow: false,
+  pulse: false,
+  glass: false,
+  gradient: false,
+  loading: false,
+  disabled: false,
+  width: "100%",
+  pauseOnHover: true,
+  indicatorPosition: "bottom",
+  arrowPosition: "overlay",
+  animation: "slide"
+};
+var TRANSITIONS = { fade: Fade, zoom: Zoom, flip: Slide, slide: Slide };
+var Carousel = (props) => {
+  const resolved = withDefaults(props, DEFAULTS);
+  const {
+    items,
+    variant,
+    size,
+    color,
+    autoPlay,
+    autoPlayInterval,
+    loop,
+    loading,
+    disabled,
+    className,
+    style,
+    height,
+    width,
+    pauseOnHover,
+    onClick,
+    onChange,
+    onFocus,
+    onBlur,
+    animation,
+    glow,
+    pulse,
+    glass,
+    gradient
+  } = resolved;
+  const theme = useTheme();
+  const containerRef = useRef(null);
+  const { activeIndex, handleNext, handlePrev, handleSelect, hoverProps } = useCarouselNavigation({
+    count: items.length,
+    loop,
+    autoPlay,
+    autoPlayInterval,
+    pauseOnHover,
+    disabled,
+    onChange
+  });
+  const handleItemClick = useCallback(
+    (item, index) => {
+      if (!disabled) {
+        onClick?.(item, index);
+      }
+    },
+    [disabled, onClick]
+  );
+  const frameSx = containerStyles({
+    theme,
+    variant,
+    size,
+    color,
+    ...frameBox(theme, size, height, width),
+    glow,
+    pulse,
+    glass,
+    gradient
+  });
+  if (loading) {
+    return /* @__PURE__ */ jsx(Box, { sx: { ...frameSx, display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx(CircularProgress, { color: muiColor(color, "inherit") }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: containerRef,
+      className,
+      "data-testid": "carousel-container",
+      sx: { ...frameSx, ...style },
+      onFocus,
+      onBlur,
+      ...hoverProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          CarouselTrack,
+          {
+            items,
+            activeIndex,
+            variant,
+            animation,
+            transition: TRANSITIONS[animation] ?? Slide,
+            clickable: Boolean(onClick),
+            onSelect: handleItemClick
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CarouselChrome,
+          {
+            ...resolved,
+            activeIndex,
+            onPrev: handlePrev,
+            onNext: handleNext,
+            onSelect: handleSelect
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  Carousel
+};
+//# sourceMappingURL=chunk-SSDYEOU4.js.map

package/dist/chunk-SSX5ITPM.js

@@ -0,0 +1,91 @@
+import {
+  alpha
+} from "./chunk-F5H2ZXST.js";
+import {
+  ATTENTION_INK,
+  CELEBRATION_GRADIENTS,
+  CODE_EDITOR_CHROME,
+  DATA_VIZ_NEON,
+  EFFECT_GLOW,
+  GLASS_SLATE,
+  HIGHLIGHT_MARK,
+  MAP_SURFACE,
+  NEUTRAL_RAMP,
+  PANEL_SHADOW_INK,
+  SOCIAL_BRAND,
+  TIMING_PHASES
+} from "./chunk-N3GAFIXG.js";
+
+// src/tokens/ink.ts
+var DEFAULT_UI_INK = {
+  dataVizNeon: DATA_VIZ_NEON,
+  timingPhases: TIMING_PHASES,
+  mapSurface: MAP_SURFACE,
+  codeEditor: CODE_EDITOR_CHROME,
+  socialBrand: SOCIAL_BRAND,
+  celebration: CELEBRATION_GRADIENTS,
+  attention: ATTENTION_INK,
+  highlightMark: HIGHLIGHT_MARK,
+  glassSlate: GLASS_SLATE,
+  panelShadowInk: PANEL_SHADOW_INK,
+  effectGlow: EFFECT_GLOW
+};
+function uiInk(theme) {
+  return { ...DEFAULT_UI_INK, ...theme.uiInk };
+}
+var scrim = (theme, opacity) => alpha(theme.palette.common.black, opacity);
+var shadowInk = (theme, opacity = 1) => alpha(theme.palette.common.black, opacity);
+var sheen = (theme, opacity = 1) => alpha(theme.palette.common.white, opacity);
+var onMedia = (theme) => theme.palette.common.white;
+var absoluteInk = (theme) => ({
+  black: theme.palette.common.black,
+  white: theme.palette.common.white
+});
+var modeInk = (theme) => theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.common.black;
+var step = (theme, n) => theme.palette.grey[n] ?? NEUTRAL_RAMP[n];
+function neutralTones(theme) {
+  return {
+    /** A dark chip on a light UI: a tooltip, a context menu, a code block's dark ground. */
+    inverseSurface: step(theme, 900),
+    /** A raised dark panel. */
+    raised: step(theme, 800),
+    /** A neutral control's fill. */
+    strong: step(theme, 700),
+    /** A neutral accent: a badge, a strong scrollbar thumb. */
+    emphasis: step(theme, 600),
+    /** A quiet mark: an offline dot, a secondary icon. */
+    muted: step(theme, 500),
+    /** An idle connector, a light scrollbar thumb. */
+    subtle: step(theme, 400),
+    /** An idle track, a placeholder fill. */
+    track: step(theme, 300),
+    /** A faint track, a light scrollbar channel. */
+    faint: step(theme, 200),
+    /** A light code block, a light card. */
+    surface: step(theme, 100),
+    /** The lightest ground. */
+    canvas: step(theme, 50)
+  };
+}
+function controlNeutral(theme) {
+  return { main: step(theme, 700), dark: step(theme, 800), light: step(theme, 500), contrastText: theme.palette.common.white };
+}
+function softNeutral(theme) {
+  const main = step(theme, 500);
+  return { main, light: step(theme, 300), dark: step(theme, 700), contrastText: theme.palette.getContrastText(main) };
+}
+
+export {
+  DEFAULT_UI_INK,
+  uiInk,
+  scrim,
+  shadowInk,
+  sheen,
+  onMedia,
+  absoluteInk,
+  modeInk,
+  neutralTones,
+  controlNeutral,
+  softNeutral
+};
+//# sourceMappingURL=chunk-SSX5ITPM.js.map

package/dist/chunk-SSX5ITPM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/ink.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { alpha } from './color';\nimport {\n  ATTENTION_INK,\n  CELEBRATION_GRADIENTS,\n  CODE_EDITOR_CHROME,\n  DATA_VIZ_NEON,\n  EFFECT_GLOW,\n  GLASS_SLATE,\n  HIGHLIGHT_MARK,\n  MAP_SURFACE,\n  NEUTRAL_RAMP,\n  PANEL_SHADOW_INK,\n  SOCIAL_BRAND,\n  TIMING_PHASES,\n} from './ink.core';\n\n/**\n * EVERY COLOUR A COMPONENT DRAWS, BY ROLE (FUT-2593, under FUT-2585).\n *\n * A component never writes a hex, an `rgba()`, a named colour or a step on the\n * grey ramp; it asks for a ROLE, and the role reads the theme:\n *\n * - the palette's own roles, straight — `text.secondary`, `divider`,\n *   `action.hover`, a semantic `main` and its `contrastText`;\n * - the INK roles below, over the palette's two absolutes — a scrim behind a\n *   modal, a shadow's ink, a glass sheen, the ink on a photo;\n * - the NEUTRAL tones, over the grey ramp, named by what they do rather than by\n *   their step, so a host that re-greys the ramp re-greys every one;\n * - `uiInk(theme)`, the colours with no palette role at all (`./ink.core.ts`),\n *   which a host can replace through `theme.uiInk`;\n * - `surfaces(theme)` and `softSignal(theme, signal)` (`./surfaces.ts`), the\n *   grounds a board and its cards sit on and a signal's soft background,\n *   which a host can replace through `theme.uiSurfaces` / `theme.uiSoftSignal`.\n *\n * Every default is the value the component drew before, so moving a component\n * onto these changed nothing on screen. `scripts/ui-tokens-gate.mjs` refuses a\n * raw colour or a ramp step in a component from here on.\n */\n\nexport interface UiInk {\n  dataVizNeon: { series: readonly string[]; ground: string; accent: string };\n  timingPhases: Record<keyof typeof TIMING_PHASES, string>;\n  mapSurface: Record<keyof typeof MAP_SURFACE, string>;\n  codeEditor: { light: Record<keyof typeof CODE_EDITOR_CHROME.light, string>; dark: Record<keyof typeof CODE_EDITOR_CHROME.dark, string> };\n  socialBrand: typeof SOCIAL_BRAND;\n  celebration: { mint: readonly [string, string]; violet: readonly [string, string] };\n  attention: { from: string; to: string; glow: string };\n  highlightMark: string;\n  glassSlate: string;\n  panelShadowInk: string;\n  effectGlow: { muiBlue: string; brandIndigo: string };\n}\n\nexport const DEFAULT_UI_INK: UiInk = {\n  dataVizNeon: DATA_VIZ_NEON,\n  timingPhases: TIMING_PHASES,\n  mapSurface: MAP_SURFACE,\n  codeEditor: CODE_EDITOR_CHROME,\n  socialBrand: SOCIAL_BRAND,\n  celebration: CELEBRATION_GRADIENTS,\n  attention: ATTENTION_INK,\n  highlightMark: HIGHLIGHT_MARK,\n  glassSlate: GLASS_SLATE,\n  panelShadowInk: PANEL_SHADOW_INK,\n  effectGlow: EFFECT_GLOW,\n};\n\ndeclare module '@mui/material/styles' {\n  interface Theme {\n    /** Colours with no palette role, by name. See `@12-apps/ui/tokens`' `uiInk`. */\n    uiInk?: Partial<UiInk>;\n  }\n  interface ThemeOptions {\n    /**\n     * Replace any of the named colour sets `@12-apps/ui` draws with. Each set is\n     * replaced WHOLE (the merge is one level deep): to change `codeEditor.dark`,\n     * pass `codeEditor` with both `light` and `dark`.\n     */\n    uiInk?: Partial<UiInk>;\n  }\n}\n\n/** The named colour sets, with the host's `theme.uiInk` layered over the defaults. */\nexport function uiInk(theme: Theme): UiInk {\n  return { ...DEFAULT_UI_INK, ...theme.uiInk };\n}\n\n/* ── Ink roles over the palette's two absolutes ───────────────────────────── */\n\n/** The dim laid behind a modal, a lightbox, a spotlight. */\nexport const scrim = (theme: Theme, opacity: number): string => alpha(theme.palette.common.black, opacity);\n\n/** The colour of a drop shadow or a glow's dark half. */\nexport const shadowInk = (theme: Theme, opacity = 1): string => alpha(theme.palette.common.black, opacity);\n\n/** A highlight: a glass edge, a shimmer, a pressed-in light. */\nexport const sheen = (theme: Theme, opacity = 1): string => alpha(theme.palette.common.white, opacity);\n\n/** Ink that sits ON a photo, a gradient or a scrim — never on the page. */\nexport const onMedia = (theme: Theme): string => theme.palette.common.white;\n\n/**\n * The palette's two absolutes, for the places the hue must be exactly black or\n * white: a CSS mask's opaque stop, the black `dark` tooltip.\n */\nexport const absoluteInk = (theme: Theme): { black: string; white: string } => ({\n  black: theme.palette.common.black,\n  white: theme.palette.common.white,\n});\n\n/** The absolute that CONTRASTS with the mode's page: black in light mode, white in dark. */\nexport const modeInk = (theme: Theme): string =>\n  theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black;\n\n/* ── Neutral tones over the grey ramp ─────────────────────────────────────── */\n\nconst step = (theme: Theme, n: keyof typeof NEUTRAL_RAMP): string => theme.palette.grey[n] ?? NEUTRAL_RAMP[n];\n\n/**\n * The neutral scale by ROLE. The names say what a tone is for, so a component\n * reads `neutralTones(theme).track` rather than \"grey 300\", and a host that\n * re-greys the ramp moves every one of them together.\n */\nexport function neutralTones(theme: Theme) {\n  return {\n    /** A dark chip on a light UI: a tooltip, a context menu, a code block's dark ground. */\n    inverseSurface: step(theme, 900),\n    /** A raised dark panel. */\n    raised: step(theme, 800),\n    /** A neutral control's fill. */\n    strong: step(theme, 700),\n    /** A neutral accent: a badge, a strong scrollbar thumb. */\n    emphasis: step(theme, 600),\n    /** A quiet mark: an offline dot, a secondary icon. */\n    muted: step(theme, 500),\n    /** An idle connector, a light scrollbar thumb. */\n    subtle: step(theme, 400),\n    /** An idle track, a placeholder fill. */\n    track: step(theme, 300),\n    /** A faint track, a light scrollbar channel. */\n    faint: step(theme, 200),\n    /** A light code block, a light card. */\n    surface: step(theme, 100),\n    /** The lightest ground. */\n    canvas: step(theme, 50),\n  };\n}\n\n/** The four-stop accent a component's `neutral` colour resolves to. */\nexport interface NeutralAccent {\n  main: string;\n  light: string;\n  dark: string;\n  contrastText: string;\n}\n\n/**\n * The neutral the CONTROLS draw with — grey 700, pressed 800, soft 500, white\n * ink — for `Button`, `Toggle`, `RadioGroup`, `Switch`, `Slider`, `Textarea`,\n * `InputOTP`. Not `accentFor(theme, 'neutral')` (600/400/800, a badge's): the\n * controls have always been one step darker.\n */\nexport function controlNeutral(theme: Theme): NeutralAccent {\n  return { main: step(theme, 700), dark: step(theme, 800), light: step(theme, 500), contrastText: theme.palette.common.white };\n}\n\n/** The softer neutral a notice or a progress track draws with — 500 on a 300 ground, 700 pressed. */\nexport function softNeutral(theme: Theme): NeutralAccent {\n  const main = step(theme, 500);\n  return { main, light: step(theme, 300), dark: step(theme, 700), contrastText: theme.palette.getContrastText(main) };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuDO,IAAM,iBAAwB;AAAA,EACnC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AACd;AAkBO,SAAS,MAAM,OAAqB;AACzC,SAAO,EAAE,GAAG,gBAAgB,GAAG,MAAM,MAAM;AAC7C;AAKO,IAAM,QAAQ,CAAC,OAAc,YAA4B,MAAM,MAAM,QAAQ,OAAO,OAAO,OAAO;AAGlG,IAAM,YAAY,CAAC,OAAc,UAAU,MAAc,MAAM,MAAM,QAAQ,OAAO,OAAO,OAAO;AAGlG,IAAM,QAAQ,CAAC,OAAc,UAAU,MAAc,MAAM,MAAM,QAAQ,OAAO,OAAO,OAAO;AAG9F,IAAM,UAAU,CAAC,UAAyB,MAAM,QAAQ,OAAO;AAM/D,IAAM,cAAc,CAAC,WAAoD;AAAA,EAC9E,OAAO,MAAM,QAAQ,OAAO;AAAA,EAC5B,OAAO,MAAM,QAAQ,OAAO;AAC9B;AAGO,IAAM,UAAU,CAAC,UACtB,MAAM,QAAQ,SAAS,SAAS,MAAM,QAAQ,OAAO,QAAQ,MAAM,QAAQ,OAAO;AAIpF,IAAM,OAAO,CAAC,OAAc,MAAyC,MAAM,QAAQ,KAAK,CAAC,KAAK,aAAa,CAAC;AAOrG,SAAS,aAAa,OAAc;AACzC,SAAO;AAAA;AAAA,IAEL,gBAAgB,KAAK,OAAO,GAAG;AAAA;AAAA,IAE/B,QAAQ,KAAK,OAAO,GAAG;AAAA;AAAA,IAEvB,QAAQ,KAAK,OAAO,GAAG;AAAA;AAAA,IAEvB,UAAU,KAAK,OAAO,GAAG;AAAA;AAAA,IAEzB,OAAO,KAAK,OAAO,GAAG;AAAA;AAAA,IAEtB,QAAQ,KAAK,OAAO,GAAG;AAAA;AAAA,IAEvB,OAAO,KAAK,OAAO,GAAG;AAAA;AAAA,IAEtB,OAAO,KAAK,OAAO,GAAG;AAAA;AAAA,IAEtB,SAAS,KAAK,OAAO,GAAG;AAAA;AAAA,IAExB,QAAQ,KAAK,OAAO,EAAE;AAAA,EACxB;AACF;AAgBO,SAAS,eAAe,OAA6B;AAC1D,SAAO,EAAE,MAAM,KAAK,OAAO,GAAG,GAAG,MAAM,KAAK,OAAO,GAAG,GAAG,OAAO,KAAK,OAAO,GAAG,GAAG,cAAc,MAAM,QAAQ,OAAO,MAAM;AAC7H;AAGO,SAAS,YAAY,OAA6B;AACvD,QAAM,OAAO,KAAK,OAAO,GAAG;AAC5B,SAAO,EAAE,MAAM,OAAO,KAAK,OAAO,GAAG,GAAG,MAAM,KAAK,OAAO,GAAG,GAAG,cAAc,MAAM,QAAQ,gBAAgB,IAAI,EAAE;AACpH;","names":[]}

package/dist/chunk-T2UP4XJF.js

@@ -0,0 +1,220 @@
+import {
+  BUTTON_SIZES,
+  ICON_ONLY_PADDING
+} from "./chunk-G2FUZALJ.js";
+import {
+  asFieldSize,
+  fieldBorder,
+  fieldHeight
+} from "./chunk-RGVNXES5.js";
+import {
+  inkOver
+} from "./chunk-44BD7SFH.js";
+import {
+  absoluteInk,
+  controlNeutral
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Button/Button.styles.ts
+import { alpha, darken, keyframes, lighten } from "@mui/material/styles/index.js";
+var pulseAnimation = (theme) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 ${rem(theme, 15)} currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var shade = (palette, key, fallback) => palette?.[key] || palette?.main || fallback[key];
+var neutralPalette = (theme) => controlNeutral(theme);
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") return neutralPalette(theme);
+  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
+  };
+  const fallback = theme.palette.primary;
+  const palette = colorMap[color] || fallback;
+  return {
+    main: palette?.main || fallback.main,
+    dark: shade(palette, "dark", fallback),
+    light: shade(palette, "light", fallback),
+    contrastText: palette?.contrastText || absoluteInk(theme).white
+  };
+};
+var SIZE_MAP = Object.fromEntries(
+  Object.entries(BUTTON_SIZES).map(([size, m]) => [
+    size,
+    { paddingYPx: m.paddingVertical, paddingXPx: m.paddingHorizontal, fontPx: m.fontSize }
+  ])
+);
+var DEFAULT_SIZE = SIZE_MAP.md;
+var sizeOf = (size) => SIZE_MAP[size] ?? DEFAULT_SIZE;
+var iconOnlyPadding = (theme, size) => {
+  const bySize = ICON_ONLY_PADDING;
+  return rem(theme, bySize[size] ?? ICON_ONLY_PADDING.md);
+};
+var iconOnlySize = (theme, size) => ({
+  minWidth: 0,
+  padding: iconOnlyPadding(theme, size),
+  fontSize: rem(theme, sizeOf(size).fontPx),
+  "& .MuiButton-startIcon, & .MuiButton-endIcon": { margin: 0 }
+});
+var buttonSize = (size, iconOnly) => (theme) => {
+  const height = fieldHeight(theme, asFieldSize(size));
+  if (iconOnly) return { ...iconOnlySize(theme, size), padding: 0, minWidth: height, minHeight: height };
+  const { paddingYPx, paddingXPx, fontPx } = sizeOf(size);
+  return { padding: rems(theme, paddingYPx, paddingXPx), fontSize: rem(theme, fontPx), minHeight: height, paddingTop: 0, paddingBottom: 0 };
+};
+var iconAlignmentStyles = (theme) => ({
+  "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: 0,
+    verticalAlign: "middle",
+    "& > *": {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: 0
+    }
+  },
+  "& .MuiButton-startIcon": {
+    marginRight: theme.spacing(0.5)
+  },
+  "& .MuiButton-endIcon": {
+    marginLeft: theme.spacing(0.5)
+  }
+});
+var GRADIENT_PAIRS = {
+  primary: (theme) => [theme.palette.primary.main, theme.palette.secondary.main],
+  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
+  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
+  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark]
+};
+var gradientStops = (theme, color, palette) => GRADIENT_PAIRS[color]?.(theme) ?? [palette.main, palette.dark];
+var gradientFor = (theme, color, palette) => {
+  const [from, to] = gradientStops(theme, color, palette);
+  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
+};
+var gradientInk = (theme, color, palette) => inkOver(gradientStops(theme, color, palette), palette.contrastText || absoluteInk(theme).white);
+var quietInk = (theme, palette) => theme.palette.mode === "dark" ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);
+var VARIANT_STYLES = {
+  solid: (theme, palette) => ({
+    backgroundColor: palette.main,
+    color: palette.contrastText || absoluteInk(theme).white,
+    "&:hover": {
+      backgroundColor: palette.dark,
+      transform: `translateY(${rem(theme, -2)})`,
+      boxShadow: theme.shadows[8]
+    }
+  }),
+  // A NEUTRAL outline is a field-row control ("Mais", "Exibir"), so it rests on
+  // the one field border; a coloured outline keeps its colour, which is the
+  // point of asking for one.
+  outline: (theme, palette, color) => ({
+    backgroundColor: "transparent",
+    color: palette.main,
+    border: color === "neutral" ? fieldBorder(theme) : `1px solid ${palette.main}`,
+    "&:hover": {
+      backgroundColor: alpha(palette.main, 0.1),
+      borderColor: palette.dark
+    }
+  }),
+  ghost: (theme, palette) => ({
+    backgroundColor: "transparent",
+    color: quietInk(theme, palette),
+    "&:hover": {
+      backgroundColor: alpha(palette.main, 0.1)
+    }
+  }),
+  text: (theme, palette) => ({
+    backgroundColor: "transparent",
+    color: quietInk(theme, palette),
+    border: `none`,
+    "&:hover": {
+      backgroundColor: alpha(palette.main, 0.1)
+    },
+    "&.active": {
+      backgroundColor: alpha(palette.main, 0.1),
+      color: quietInk(theme, palette)
+    }
+  }),
+  glass: (theme, palette) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: `blur(${rem(theme, 20)})`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    color: palette.main,
+    "&:hover": {
+      backgroundColor: alpha(theme.palette.background.paper, 0.2),
+      transform: `translateY(${rem(theme, -2)})`
+    }
+  }),
+  gradient: (theme, palette, color) => ({
+    background: gradientFor(theme, color, palette),
+    color: gradientInk(theme, color, palette),
+    "&:hover": {
+      filter: "brightness(1.1)",
+      transform: `translateY(${rem(theme, -2)})`,
+      boxShadow: theme.shadows[12]
+    }
+  })
+};
+var buttonVariantStyles = (theme, variant, palette, color) => VARIANT_STYLES[variant ?? ""]?.(theme, palette, color) ?? {};
+var glowStyles = (theme, palette) => ({
+  boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(palette.main, 0.6)}, ${rems(theme, 0, 0, 40, 10)} ${alpha(palette.main, 0.3)} !important`,
+  filter: "brightness(1.05)",
+  "&:hover": {
+    boxShadow: `${rems(theme, 0, 0, 25, 8)} ${alpha(palette.main, 0.7)}, ${rems(theme, 0, 0, 50, 15)} ${alpha(palette.main, 0.4)} !important`,
+    filter: "brightness(1.1)",
+    transform: `translateY(${rem(theme, -2)}) scale(1.02)`
+  }
+});
+var pulseStyles = (theme, palette) => ({
+  position: "relative",
+  overflow: "visible",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "100%",
+    height: "100%",
+    borderRadius: "inherit",
+    transform: "translate(-50%, -50%)",
+    backgroundColor: palette.main,
+    opacity: 0.3,
+    animation: `${pulseAnimation(theme)} 2s infinite`,
+    pointerEvents: "none",
+    zIndex: -1
+  }
+});
+var buttonEmphasisStyles = (theme, palette, glow, pulse) => ({
+  ...glow ? glowStyles(theme, palette) : {},
+  ...pulse ? pulseStyles(theme, palette) : {}
+});
+
+export {
+  getColorFromTheme,
+  buttonSize,
+  iconAlignmentStyles,
+  buttonVariantStyles,
+  buttonEmphasisStyles
+};
+//# sourceMappingURL=chunk-T2UP4XJF.js.map