@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-TXGB2WSW.js

@@ -0,0 +1,321 @@
+import {
+  buildChartContext
+} from "./chunk-3GTMGPNQ.js";
+import {
+  ChartLegendContent,
+  ChartTooltipContent
+} from "./chunk-RIRTW5EU.js";
+import {
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chart/chart-renderers.tsx
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ComposedChart,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function chartExtras(ctx) {
+  const { props } = ctx;
+  const nodes = [];
+  if (props.showTooltip !== false) {
+    nodes.push(
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter: props.valueFormatter }) }, "tooltip")
+    );
+  }
+  if (props.showLegend !== false) {
+    nodes.push(/* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }, "legend"));
+  }
+  return nodes;
+}
+function chartGrid(ctx) {
+  return /* @__PURE__ */ jsx(CartesianGrid, { stroke: ctx.gridStroke, strokeOpacity: ctx.gridOpacity }, "grid");
+}
+function cartesianAxes(ctx) {
+  const { props, axisConfig } = ctx;
+  const nodes = [];
+  if (props.showCartesianGrid !== false) nodes.push(chartGrid(ctx));
+  nodes.push(
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: props.xAxisKey ?? "name",
+        style: ctx.axisStyle,
+        label: props.xAxisLabel,
+        tickMargin: axisConfig.tickMargin,
+        ticks: axisConfig.categoryTicks,
+        tickFormatter: axisConfig.tickFormatter
+      },
+      "x"
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        style: ctx.axisStyle,
+        label: props.yAxisLabel,
+        width: "auto",
+        tickMargin: axisConfig.tickMargin,
+        tickFormatter: props.valueFormatter,
+        allowDecimals: props.allowDecimalTicks !== false
+      },
+      "y"
+    )
+  );
+  return nodes;
+}
+function renderLine(ctx) {
+  return /* @__PURE__ */ jsxs(LineChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        strokeWidth: s.strokeWidth ?? 2,
+        dot: s.dot !== false,
+        activeDot: s.activeDot !== false ? { r: 8 } : false,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderBar(ctx) {
+  return /* @__PURE__ */ jsxs(BarChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        stackId: ctx.props.stacked ? "stack" : void 0,
+        radius: ctx.barGeometry.radius,
+        maxBarSize: ctx.barGeometry.maxBarSize,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderArea(ctx) {
+  return /* @__PURE__ */ jsxs(AreaChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fillOpacity: s.fillOpacity ?? 0.6,
+        stackId: ctx.props.stacked ? "stack" : void 0,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function pieCenterLabel(ctx) {
+  const { centerLabel } = ctx.props;
+  const innerRadius = ctx.props.innerRadius ?? 0;
+  if (!centerLabel || innerRadius <= 0) return null;
+  const fill = ctx.props.variant === "neon" ? uiInk(ctx.theme).dataVizNeon.accent : ctx.theme.palette.text.primary;
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: "50%",
+      y: "50%",
+      textAnchor: "middle",
+      dominantBaseline: "middle",
+      style: { fontSize: ctx.sizeStyles.fontSize, fill, fontWeight: 600 },
+      children: typeof centerLabel === "string" ? centerLabel : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "tspan",
+          {
+            x: "50%",
+            dy: "-0.6em",
+            style: { fontSize: "0.875em", fontWeight: 500, fill: ctx.theme.palette.text.secondary },
+            children: centerLabel.label
+          }
+        ),
+        /* @__PURE__ */ jsx("tspan", { x: "50%", dy: "1.4em", style: { fontSize: "1.5em", fontWeight: 700 }, children: centerLabel.value })
+      ] })
+    }
+  );
+}
+function renderPie(ctx) {
+  const { props } = ctx;
+  return /* @__PURE__ */ jsxs(PieChart, { children: [
+    chartExtras(ctx),
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data: props.data,
+        dataKey: ctx.chartSeries[0]?.dataKey ?? "value",
+        nameKey: props.xAxisKey ?? "name",
+        cx: "50%",
+        cy: "50%",
+        outerRadius: ctx.sizeStyles.height / 3,
+        innerRadius: remPx(ctx.theme, props.innerRadius ?? 0),
+        fill: ctx.chartColors[0],
+        label: props.showValues ?? false,
+        animationDuration: ctx.animationDuration,
+        children: props.data.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: ctx.chartColors[index % ctx.chartColors.length] }, `cell-${index}`))
+      }
+    ),
+    pieCenterLabel(ctx)
+  ] });
+}
+function renderRadar(ctx) {
+  return /* @__PURE__ */ jsxs(RadarChart, { ...ctx.commonProps, children: [
+    /* @__PURE__ */ jsx(PolarGrid, { stroke: ctx.gridStroke }),
+    /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: ctx.props.xAxisKey ?? "name", style: ctx.axisStyle }),
+    /* @__PURE__ */ jsx(PolarRadiusAxis, { style: ctx.axisStyle }),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx(
+      Radar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fillOpacity: s.fillOpacity ?? 0.6,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderScatter(ctx) {
+  const { props } = ctx;
+  return /* @__PURE__ */ jsxs(ScatterChart, { ...ctx.commonProps, children: [
+    props.showCartesianGrid !== false && chartGrid(ctx),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: props.xAxisKey ?? "name",
+        style: ctx.axisStyle,
+        label: props.xAxisLabel,
+        tickMargin: ctx.axisConfig.tickMargin
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        dataKey: ctx.chartSeries[0]?.dataKey,
+        style: ctx.axisStyle,
+        label: props.yAxisLabel,
+        tickMargin: ctx.axisConfig.tickMargin
+      }
+    ),
+    chartExtras(ctx),
+    /* @__PURE__ */ jsx(
+      Scatter,
+      {
+        name: ctx.chartSeries[0]?.name ?? "Data",
+        data: props.data,
+        fill: ctx.chartColors[0],
+        animationDuration: ctx.animationDuration
+      }
+    )
+  ] });
+}
+function composedSeries(ctx, s, index) {
+  const color = s.color ?? ctx.chartColors[index % ctx.chartColors.length];
+  if (s.type === "bar") {
+    return /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        fill: color,
+        radius: ctx.barGeometry.radius,
+        maxBarSize: ctx.barGeometry.maxBarSize,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    );
+  }
+  if (s.type === "area") {
+    return /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: color,
+        fill: color,
+        fillOpacity: 0.6,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Line,
+    {
+      type: ctx.strokeType,
+      dataKey: s.dataKey,
+      name: s.name,
+      stroke: color,
+      animationDuration: ctx.animationDuration
+    },
+    s.dataKey
+  );
+}
+function renderComposed(ctx) {
+  return /* @__PURE__ */ jsxs(ComposedChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => composedSeries(ctx, s, index))
+  ] });
+}
+var RENDERERS = {
+  line: renderLine,
+  bar: renderBar,
+  area: renderArea,
+  pie: renderPie,
+  radar: renderRadar,
+  scatter: renderScatter,
+  composed: renderComposed
+};
+function renderChartByType(props, theme) {
+  const renderer = RENDERERS[props.type ?? "line"];
+  const ctx = buildChartContext(props, theme);
+  return renderer ? renderer(ctx) : /* @__PURE__ */ jsx(Fragment, {});
+}
+
+export {
+  renderChartByType
+};
+//# sourceMappingURL=chunk-TXGB2WSW.js.map

package/dist/chunk-TXGB2WSW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/chart-renderers.tsx"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  ComposedChart,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  Scatter,\n  ScatterChart,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport type { ChartProps, ChartSeries } from './Chart.types';\nimport { ChartLegendContent, ChartTooltipContent } from './ChartComposables';\nimport { buildChartContext, type ChartRenderContext } from './chart-context';\nimport { uiInk } from '../../../tokens/ink';\nimport { remPx } from '../../../tokens/relative';\n\n/**\n * Per-type Recharts renderers for the prop-driven Chart, dispatched from a\n * registry keyed by `ChartProps['type']`. Each renderer reads a prepared\n * {@link ChartRenderContext} so every function stays small.\n */\n\nfunction chartExtras(ctx: ChartRenderContext): React.ReactNode[] {\n  const { props } = ctx;\n  const nodes: React.ReactNode[] = [];\n  if (props.showTooltip !== false) {\n    nodes.push(\n      <Tooltip key=\"tooltip\" content={<ChartTooltipContent valueFormatter={props.valueFormatter} />} />,\n    );\n  }\n  if (props.showLegend !== false) {\n    nodes.push(<Legend key=\"legend\" content={<ChartLegendContent />} />);\n  }\n  return nodes;\n}\n\n/**\n * Gridlines: solid, and one step below the card border. A dashed line at the\n * border's own weight competes with the data drawn over it.\n */\nfunction chartGrid(ctx: ChartRenderContext): React.ReactElement {\n  return <CartesianGrid key=\"grid\" stroke={ctx.gridStroke} strokeOpacity={ctx.gridOpacity} />;\n}\n\nfunction cartesianAxes(ctx: ChartRenderContext): React.ReactNode[] {\n  const { props, axisConfig } = ctx;\n  const nodes: React.ReactNode[] = [];\n  if (props.showCartesianGrid !== false) nodes.push(chartGrid(ctx));\n  nodes.push(\n    <XAxis\n      key=\"x\"\n      dataKey={props.xAxisKey ?? 'name'}\n      style={ctx.axisStyle}\n      label={props.xAxisLabel}\n      tickMargin={axisConfig.tickMargin}\n      ticks={axisConfig.categoryTicks}\n      tickFormatter={axisConfig.tickFormatter}\n    />,\n    <YAxis\n      key=\"y\"\n      style={ctx.axisStyle}\n      label={props.yAxisLabel}\n      // Sized from its own widest tick: a fixed 60px lets \"R$ 1.234,56\" spill\n      // out of the card, which is the other way axis text ends up on top of\n      // something.\n      width=\"auto\"\n      tickMargin={axisConfig.tickMargin}\n      tickFormatter={props.valueFormatter}\n      allowDecimals={props.allowDecimalTicks !== false}\n    />,\n  );\n  return nodes;\n}\n\nfunction renderLine(ctx: ChartRenderContext): React.ReactElement {\n  return (\n    <LineChart {...ctx.commonProps}>\n      {cartesianAxes(ctx)}\n      {chartExtras(ctx)}\n      {ctx.chartSeries.map((s, index) => (\n        <Line\n          key={s.dataKey}\n          type={ctx.strokeType}\n          dataKey={s.dataKey}\n          name={s.name}\n          stroke={s.color ?? ctx.chartColors[index % ctx.chartColors.length]}\n          strokeWidth={s.strokeWidth ?? 2}\n          dot={s.dot !== false}\n          activeDot={s.activeDot !== false ? { r: 8 } : false}\n          animationDuration={ctx.animationDuration}\n        />\n      ))}\n    </LineChart>\n  );\n}\n\nfunction renderBar(ctx: ChartRenderContext): React.ReactElement {\n  return (\n    <BarChart {...ctx.commonProps}>\n      {cartesianAxes(ctx)}\n      {chartExtras(ctx)}\n      {ctx.chartSeries.map((s, index) => (\n        <Bar\n          key={s.dataKey}\n          dataKey={s.dataKey}\n          name={s.name}\n          fill={s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length]}\n          stackId={ctx.props.stacked ? 'stack' : undefined}\n          radius={ctx.barGeometry.radius}\n          maxBarSize={ctx.barGeometry.maxBarSize}\n          animationDuration={ctx.animationDuration}\n        />\n      ))}\n    </BarChart>\n  );\n}\n\nfunction renderArea(ctx: ChartRenderContext): React.ReactElement {\n  return (\n    <AreaChart {...ctx.commonProps}>\n      {cartesianAxes(ctx)}\n      {chartExtras(ctx)}\n      {ctx.chartSeries.map((s, index) => (\n        <Area\n          key={s.dataKey}\n          type={ctx.strokeType}\n          dataKey={s.dataKey}\n          name={s.name}\n          stroke={s.color ?? ctx.chartColors[index % ctx.chartColors.length]}\n          fill={s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length]}\n          fillOpacity={s.fillOpacity ?? 0.6}\n          stackId={ctx.props.stacked ? 'stack' : undefined}\n          animationDuration={ctx.animationDuration}\n        />\n      ))}\n    </AreaChart>\n  );\n}\n\nfunction pieCenterLabel(ctx: ChartRenderContext): React.ReactNode {\n  const { centerLabel } = ctx.props;\n  const innerRadius = ctx.props.innerRadius ?? 0;\n  if (!centerLabel || innerRadius <= 0) return null;\n  const fill = ctx.props.variant === 'neon' ? uiInk(ctx.theme).dataVizNeon.accent : ctx.theme.palette.text.primary;\n  return (\n    <text\n      x=\"50%\"\n      y=\"50%\"\n      textAnchor=\"middle\"\n      dominantBaseline=\"middle\"\n      style={{ fontSize: ctx.sizeStyles.fontSize, fill, fontWeight: 600 }}\n    >\n      {typeof centerLabel === 'string' ? (\n        centerLabel\n      ) : (\n        <>\n          <tspan\n            x=\"50%\"\n            dy=\"-0.6em\"\n            style={{ fontSize: '0.875em', fontWeight: 500, fill: ctx.theme.palette.text.secondary }}\n          >\n            {centerLabel.label}\n          </tspan>\n          <tspan x=\"50%\" dy=\"1.4em\" style={{ fontSize: '1.5em', fontWeight: 700 }}>\n            {centerLabel.value}\n          </tspan>\n        </>\n      )}\n    </text>\n  );\n}\n\nfunction renderPie(ctx: ChartRenderContext): React.ReactElement {\n  const { props } = ctx;\n  return (\n    <PieChart>\n      {chartExtras(ctx)}\n      <Pie\n        data={props.data}\n        dataKey={ctx.chartSeries[0]?.dataKey ?? 'value'}\n        nameKey={props.xAxisKey ?? 'name'}\n        cx=\"50%\"\n        cy=\"50%\"\n        outerRadius={ctx.sizeStyles.height / 3}\n        innerRadius={remPx(ctx.theme, props.innerRadius ?? 0)}\n        fill={ctx.chartColors[0]}\n        label={props.showValues ?? false}\n        animationDuration={ctx.animationDuration}\n      >\n        {props.data.map((entry, index) => (\n          <Cell key={`cell-${index}`} fill={ctx.chartColors[index % ctx.chartColors.length]} />\n        ))}\n      </Pie>\n      {pieCenterLabel(ctx)}\n    </PieChart>\n  );\n}\n\nfunction renderRadar(ctx: ChartRenderContext): React.ReactElement {\n  return (\n    <RadarChart {...ctx.commonProps}>\n      <PolarGrid stroke={ctx.gridStroke} />\n      <PolarAngleAxis dataKey={ctx.props.xAxisKey ?? 'name'} style={ctx.axisStyle} />\n      <PolarRadiusAxis style={ctx.axisStyle} />\n      {chartExtras(ctx)}\n      {ctx.chartSeries.map((s, index) => (\n        <Radar\n          key={s.dataKey}\n          dataKey={s.dataKey}\n          name={s.name}\n          stroke={s.color ?? ctx.chartColors[index % ctx.chartColors.length]}\n          fill={s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length]}\n          fillOpacity={s.fillOpacity ?? 0.6}\n          animationDuration={ctx.animationDuration}\n        />\n      ))}\n    </RadarChart>\n  );\n}\n\nfunction renderScatter(ctx: ChartRenderContext): React.ReactElement {\n  const { props } = ctx;\n  return (\n    <ScatterChart {...ctx.commonProps}>\n      {props.showCartesianGrid !== false && chartGrid(ctx)}\n      <XAxis\n        dataKey={props.xAxisKey ?? 'name'}\n        style={ctx.axisStyle}\n        label={props.xAxisLabel}\n        tickMargin={ctx.axisConfig.tickMargin}\n      />\n      <YAxis\n        dataKey={ctx.chartSeries[0]?.dataKey}\n        style={ctx.axisStyle}\n        label={props.yAxisLabel}\n        tickMargin={ctx.axisConfig.tickMargin}\n      />\n      {chartExtras(ctx)}\n      <Scatter\n        name={ctx.chartSeries[0]?.name ?? 'Data'}\n        data={props.data}\n        fill={ctx.chartColors[0]}\n        animationDuration={ctx.animationDuration}\n      />\n    </ScatterChart>\n  );\n}\n\nfunction composedSeries(ctx: ChartRenderContext, s: ChartSeries, index: number): React.ReactElement {\n  const color = s.color ?? ctx.chartColors[index % ctx.chartColors.length];\n  if (s.type === 'bar') {\n    return (\n      <Bar\n        key={s.dataKey}\n        dataKey={s.dataKey}\n        name={s.name}\n        fill={color}\n        radius={ctx.barGeometry.radius}\n        maxBarSize={ctx.barGeometry.maxBarSize}\n        animationDuration={ctx.animationDuration}\n      />\n    );\n  }\n  if (s.type === 'area') {\n    return (\n      <Area\n        key={s.dataKey}\n        type={ctx.strokeType}\n        dataKey={s.dataKey}\n        name={s.name}\n        stroke={color}\n        fill={color}\n        fillOpacity={0.6}\n        animationDuration={ctx.animationDuration}\n      />\n    );\n  }\n  return (\n    <Line\n      key={s.dataKey}\n      type={ctx.strokeType}\n      dataKey={s.dataKey}\n      name={s.name}\n      stroke={color}\n      animationDuration={ctx.animationDuration}\n    />\n  );\n}\n\nfunction renderComposed(ctx: ChartRenderContext): React.ReactElement {\n  return (\n    <ComposedChart {...ctx.commonProps}>\n      {cartesianAxes(ctx)}\n      {chartExtras(ctx)}\n      {ctx.chartSeries.map((s, index) => composedSeries(ctx, s, index))}\n    </ComposedChart>\n  );\n}\n\nconst RENDERERS: Record<string, (ctx: ChartRenderContext) => React.ReactElement> = {\n  line: renderLine,\n  bar: renderBar,\n  area: renderArea,\n  pie: renderPie,\n  radar: renderRadar,\n  scatter: renderScatter,\n  composed: renderComposed,\n};\n\n/** Render the Recharts element for the requested chart type. */\nexport function renderChartByType(props: ChartProps, theme: Theme): React.ReactElement {\n  const renderer = RENDERERS[props.type ?? 'line'];\n  const ctx = buildChartContext(props, theme);\n  return renderer ? renderer(ctx) : <></>;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-TYBZ4XZZ.js

@@ -0,0 +1,157 @@
+import {
+  absoluteInk,
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Tooltip/Tooltip.tsx
+import MuiTooltip from "@mui/material/Tooltip/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var pulseAnimation = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+var SIZE_MAP = {
+  sm: { fontSize: sxRem(12), padding: (theme) => rems(theme, 4, 8) },
+  md: { fontSize: sxRem(14), padding: (theme) => rems(theme, 6, 12) },
+  lg: { fontSize: sxRem(16), padding: (theme) => rems(theme, 8, 16) }
+};
+var getSizeStyles = (size) => SIZE_MAP[size] || SIZE_MAP.md;
+var variantStyles = (theme, variant) => {
+  switch (variant) {
+    case "default":
+      return {
+        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.9),
+        color: absoluteInk(theme).white
+      };
+    case "dark":
+      return {
+        backgroundColor: neutralTones(theme).inverseSurface,
+        color: absoluteInk(theme).white
+      };
+    case "light":
+      return {
+        backgroundColor: absoluteInk(theme).white,
+        color: theme.palette.text.primary,
+        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+        boxShadow: theme.shadows[4]
+      };
+    case "glass":
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: `blur(${rem(theme, 20)})`,
+        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+        color: theme.palette.text.primary
+      };
+    default:
+      return {};
+  }
+};
+var emphasisStyles = (theme, glow, pulse) => ({
+  ...glow && {
+    boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,
+    filter: "brightness(1.05)"
+  },
+  ...pulse && {
+    animation: `${pulseAnimation} 2s infinite`
+  }
+});
+var arrowColor = (theme, variant) => {
+  switch (variant) {
+    case "light":
+      return absoluteInk(theme).white;
+    case "glass":
+      return alpha(theme.palette.background.paper, 0.1);
+    case "dark":
+      return neutralTones(theme).inverseSurface;
+    default:
+      return alpha(neutralTones(theme).inverseSurface, 0.9);
+  }
+};
+var StyledTooltip = styled(MuiTooltip, {
+  shouldForwardProp: (prop) => !["customVariant", "customSize", "glow", "pulse"].includes(prop)
+})(({ theme, customVariant, customSize, glow, pulse }) => {
+  const sizeStyles = getSizeStyles(customSize);
+  return {
+    "& .MuiTooltip-tooltip": {
+      borderRadius: theme.spacing(1),
+      fontSize: sizeStyles.fontSize(theme),
+      padding: sizeStyles.padding(theme),
+      fontWeight: 500,
+      transition: "all 0.3s ease",
+      position: "relative",
+      overflow: "hidden",
+      ...variantStyles(theme, customVariant),
+      ...emphasisStyles(theme, glow, pulse)
+    },
+    "& .MuiTooltip-arrow": {
+      color: arrowColor(theme, customVariant)
+    }
+  };
+});
+var tooltipCap = (maxWidth) => (theme) => {
+  const cap = maxWidth ?? 300;
+  return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
+};
+var Tooltip = React.forwardRef(
+  ({
+    variant = "default",
+    size = "md",
+    glow = false,
+    pulse = false,
+    maxWidth,
+    dataTestId,
+    children,
+    ...props
+  }, ref) => {
+    const childWithTestId = dataTestId ? React.cloneElement(children, {
+      "data-testid": `${dataTestId}-trigger`
+    }) : children;
+    return /* @__PURE__ */ jsx(
+      StyledTooltip,
+      {
+        ref,
+        customVariant: variant,
+        customSize: size,
+        glow,
+        pulse,
+        enterDelay: 0,
+        leaveDelay: 0,
+        disableHoverListener: false,
+        disableFocusListener: false,
+        disableTouchListener: false,
+        slotProps: {
+          tooltip: {
+            sx: { maxWidth: tooltipCap(maxWidth) },
+            role: "tooltip",
+            ...dataTestId && { "data-testid": `${dataTestId}-content` }
+          }
+        },
+        ...props,
+        children: childWithTestId
+      }
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+
+export {
+  Tooltip
+};
+//# sourceMappingURL=chunk-TYBZ4XZZ.js.map

package/dist/chunk-TYBZ4XZZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Tooltip/Tooltip.tsx"],"sourcesContent":["import MuiTooltip from '@mui/material/Tooltip/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { TooltipProps } from './Tooltip.types';\nimport { absoluteInk, neutralTones } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  70% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst SIZE_MAP = {\n  sm: { fontSize: sxRem(12), padding: (theme: Theme) => rems(theme, 4, 8) },\n  md: { fontSize: sxRem(14), padding: (theme: Theme) => rems(theme, 6, 12) },\n  lg: { fontSize: sxRem(16), padding: (theme: Theme) => rems(theme, 8, 16) },\n} as const;\n\nconst getSizeStyles = (\n  size?: string,\n): { fontSize: (theme: Theme) => string; padding: (theme: Theme) => string } =>\n  SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;\n\nconst variantStyles = (theme: Theme, variant?: string): CSSObject => {\n  switch (variant) {\n    case 'default':\n      return {\n        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.9),\n        color: absoluteInk(theme).white,\n      };\n    case 'dark':\n      return {\n        backgroundColor: neutralTones(theme).inverseSurface,\n        color: absoluteInk(theme).white,\n      };\n    case 'light':\n      return {\n        backgroundColor: absoluteInk(theme).white,\n        color: theme.palette.text.primary,\n        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n        boxShadow: theme.shadows[4],\n      };\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n        color: theme.palette.text.primary,\n      };\n    default:\n      return {};\n  }\n};\n\n// glow and pulse are independent flags. The three combinations used to be spelled\n// out one by one, but each is just the union of whichever flags are set.\nconst emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({\n  ...(glow && {\n    boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,\n    filter: 'brightness(1.05)',\n  }),\n  ...(pulse && {\n    animation: `${pulseAnimation} 2s infinite`,\n  }),\n});\n\nconst arrowColor = (theme: Theme, variant?: string): string => {\n  switch (variant) {\n    case 'light':\n      return absoluteInk(theme).white;\n    case 'glass':\n      return alpha(theme.palette.background.paper, 0.1);\n    case 'dark':\n      return neutralTones(theme).inverseSurface;\n    default:\n      return alpha(neutralTones(theme).inverseSurface, 0.9);\n  }\n};\n\nconst StyledTooltip = styled(MuiTooltip, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customSize?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, customSize, glow, pulse }) => {\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    '& .MuiTooltip-tooltip': {\n      borderRadius: theme.spacing(1),\n      fontSize: sizeStyles.fontSize(theme),\n      padding: sizeStyles.padding(theme),\n      fontWeight: 500,\n      transition: 'all 0.3s ease',\n      position: 'relative',\n      overflow: 'hidden',\n      ...variantStyles(theme, customVariant),\n      ...emphasisStyles(theme, glow, pulse),\n    },\n\n    '& .MuiTooltip-arrow': {\n      color: arrowColor(theme, customVariant),\n    },\n  };\n});\n\n/**\n * The tooltip's cap: 300 design px unless the caller says otherwise. `sx` has\n * always read a number of 1 or less as a fraction of the parent, and that stays so.\n */\nconst tooltipCap =\n  (maxWidth: number | undefined) =>\n  (theme: Theme): string => {\n    const cap = maxWidth ?? 300;\n    return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);\n  };\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(\n  (\n    {\n      variant = 'default',\n      size = 'md',\n      glow = false,\n      pulse = false,\n      maxWidth,\n      dataTestId,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const childWithTestId = dataTestId\n      ? React.cloneElement(children as React.ReactElement<{ 'data-testid'?: string }>, {\n          'data-testid': `${dataTestId}-trigger`,\n        })\n      : children;\n\n    return (\n      <StyledTooltip\n        ref={ref}\n        customVariant={variant}\n        customSize={size}\n        glow={glow}\n        pulse={pulse}\n        enterDelay={0}\n        leaveDelay={0}\n        disableHoverListener={false}\n        disableFocusListener={false}\n        disableTouchListener={false}\n        slotProps={{\n          tooltip: {\n            sx: { maxWidth: tooltipCap(maxWidth) },\n            role: 'tooltip',\n            ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),\n          },\n        }}\n        {...props}\n      >\n        {childWithTestId}\n      </StyledTooltip>\n    );\n  },\n);\n\nTooltip.displayName = 'Tooltip';\n"],"mappings":"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","names":[]}

package/dist/chunk-TZASFX6G.js

@@ -0,0 +1,159 @@
+import {
+  useLightboxCopy
+} from "./chunk-TEQYTEM2.js";
+import {
+  OVERLAY_Z_INDEX,
+  navButtonSx,
+  overlayButtonSx
+} from "./chunk-3KA6MYIR.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Lightbox/LightboxControls.tsx
+import PrevIcon from "@mui/icons-material/ChevronLeft";
+import NextIcon from "@mui/icons-material/ChevronRight";
+import CloseIcon from "@mui/icons-material/Close";
+import PauseIcon from "@mui/icons-material/Pause";
+import PlayIcon from "@mui/icons-material/PlayArrow";
+import ResetZoomIcon from "@mui/icons-material/RestartAlt";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import Box from "@mui/material/Box/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LightboxCloseButton = ({
+  testId,
+  onClose
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      onClick: onClose,
+      sx: { ...overlayButtonSx, position: "absolute", top: sxRem(16), right: sxRem(16), zIndex: OVERLAY_Z_INDEX },
+      "aria-label": copy.close,
+      "data-testid": testId("close"),
+      children: /* @__PURE__ */ jsx(CloseIcon, {})
+    }
+  );
+};
+var arrowSx = (side) => ({
+  ...navButtonSx,
+  position: "absolute",
+  [side]: sxRem(16),
+  top: "50%",
+  transform: "translateY(-50%)",
+  zIndex: OVERLAY_Z_INDEX
+});
+var LightboxNavButtons = ({
+  testId,
+  atStart,
+  atEnd,
+  onPrev,
+  onNext
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onPrev,
+        disabled: atStart,
+        sx: arrowSx("left"),
+        "aria-label": copy.previous,
+        "data-testid": testId("prev"),
+        children: /* @__PURE__ */ jsx(PrevIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onNext,
+        disabled: atEnd,
+        sx: arrowSx("right"),
+        "aria-label": copy.next,
+        "data-testid": testId("next"),
+        children: /* @__PURE__ */ jsx(NextIcon, {})
+      }
+    )
+  ] });
+};
+var LightboxZoomControls = ({
+  testId,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: sxRem(16),
+        left: sxRem(16),
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        zIndex: OVERLAY_Z_INDEX
+      },
+      "data-testid": testId("zoom-controls"),
+      children: [
+        /* @__PURE__ */ jsx(IconButton, { onClick: onZoomIn, sx: overlayButtonSx, "aria-label": copy.zoomIn, "data-testid": testId("zoom-in"), children: /* @__PURE__ */ jsx(ZoomInIcon, {}) }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onZoomOut,
+            sx: overlayButtonSx,
+            "aria-label": copy.zoomOut,
+            "data-testid": testId("zoom-out"),
+            children: /* @__PURE__ */ jsx(ZoomOutIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onResetZoom,
+            sx: overlayButtonSx,
+            "aria-label": copy.resetZoom,
+            "data-testid": testId("zoom-reset"),
+            children: /* @__PURE__ */ jsx(ResetZoomIcon, {})
+          }
+        )
+      ]
+    }
+  );
+};
+var LightboxAutoplayButton = ({
+  testId,
+  isAutoPlaying,
+  onToggle
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      onClick: onToggle,
+      sx: {
+        ...overlayButtonSx,
+        position: "absolute",
+        top: sxRem(16),
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: OVERLAY_Z_INDEX
+      },
+      "aria-label": isAutoPlaying ? copy.pause : copy.play,
+      "data-testid": testId("autoplay"),
+      children: isAutoPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+    }
+  );
+};
+
+export {
+  LightboxCloseButton,
+  LightboxNavButtons,
+  LightboxZoomControls,
+  LightboxAutoplayButton
+};
+//# sourceMappingURL=chunk-TZASFX6G.js.map