@manta-eu/react 0.6.0 → 0.8.0

package/src/components/chart/ForecastHoverCard.tsx

@@ -0,0 +1,73 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { plansAt, projectedKey, signedChange, type ForecastPlanShare } from "./forecast";
+import { cn } from "#style";
+
+export type ForecastHoverMetric = { key: string; label: string; withoutKey?: string; lowerIsBetter: boolean };
+
+type ForecastHoverCardProps = {
+  metric: ForecastHoverMetric | undefined;
+  formatDetail: (value: number) => string;
+  changeLabel: string;
+  projectedLabel: string;
+  planShares: readonly ForecastPlanShare[];
+  active?: boolean;
+  label?: string | number;
+  payload?: { payload?: Record<string, unknown> }[];
+};
+
+/** The card for the line under the pointer: its figure and, when projected, the gap and the plans behind it. */
+export function ForecastHoverCard(props: ForecastHoverCardProps) {
+  const { metric, formatDetail, changeLabel, projectedLabel, planShares, active, label, payload } = props;
+  const row = payload?.[0]?.payload;
+  const value = metric === undefined ? undefined : row?.[metric.key];
+  if (active !== true || row === undefined || metric === undefined || typeof value !== "number") {
+    return null;
+  }
+  const projected = row[projectedKey] === true;
+  const without = isPresent(metric.withoutKey) ? row[metric.withoutKey] : undefined;
+  const x = row.x;
+  function helps(change: number) {
+    return metric?.lowerIsBetter === true ? change <= 0 : change >= 0;
+  }
+  const plans =
+    projected && (typeof x === "string" || typeof x === "number") ? plansAt(planShares, x, metric.key).slice(0, 2) : [];
+  return (
+    <div className="min-w-50 max-w-75 rounded-md-v4 border border-default-border bg-card px-3 py-2.5 text-default-foreground shadow-xl">
+      <p className="mb-1.5 typography-tiny text-muted-foreground">
+        {label}
+        {projected ? ` · ${projectedLabel}` : ""}
+      </p>
+      <p className="flex items-baseline justify-between gap-4 typography-small text-muted-foreground">
+        <span>{metric.label}</span>
+        <strong className="typography-body-semibold tabular-nums text-default-foreground">{formatDetail(value)}</strong>
+      </p>
+      {projected && typeof without === "number" ? (
+        <p
+          className={cn(
+            "typography-small-medium tabular-nums",
+            helps(value - without) ? "text-accent-foreground" : "text-muted-foreground",
+          )}
+        >
+          {signedChange(value, without, formatDetail)} {changeLabel}
+        </p>
+      ) : null}
+      {isPresent(plans) ? (
+        <div className="mt-2 grid gap-0.5 border-t border-default-border pt-2">
+          {plans.map((plan) => (
+            <p key={plan.label} className="flex items-baseline justify-between gap-3 typography-tiny">
+              <span className="min-w-0">{plan.label}</span>
+              <strong
+                className={cn(
+                  "flex-none typography-tiny-semibold tabular-nums",
+                  helps(plan.value) ? "text-accent-foreground" : "text-muted-foreground",
+                )}
+              >
+                {signedChange(plan.value, 0, formatDetail)}
+              </strong>
+            </p>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/chart/ForecastLegend.tsx

@@ -0,0 +1,97 @@
+import { cn } from "#style";
+
+export type ForecastLegendItem = {
+  label: string;
+  color: string;
+  kind: "line" | "dotted-line" | "thin-line" | "fill" | "faint-fill";
+};
+
+type LegendSource = {
+  metrics: { label: string; color: string }[];
+  withoutLabels: string[];
+  /** The metrics with a `withoutPlans` line and the color their gain is shaded in. */
+  gains: { metric: string; color: string }[];
+  gainLabel: string;
+  betweenLabels: string[];
+  firstColor: string;
+  withoutColor: string;
+  hasProjection: boolean;
+  legendLabels?: { historic?: string; projected?: string };
+};
+
+/** Two metrics are named per line; a single metric is split into its historic and projected parts instead. */
+export function forecastLegendItems(source: LegendSource): ForecastLegendItem[] {
+  const {
+    metrics,
+    withoutLabels,
+    gains,
+    gainLabel,
+    betweenLabels,
+    firstColor,
+    withoutColor,
+    hasProjection,
+    legendLabels,
+  } = source;
+  const withoutItems = [...new Set(withoutLabels)].map(
+    (label): ForecastLegendItem => ({ label, color: withoutColor, kind: "thin-line" }),
+  );
+  const oneGainColor = new Set(gains.map((gain) => gain.color)).size === 1;
+  const gainItems = (oneGainColor ? gains.slice(0, 1) : gains).map(
+    (gain): ForecastLegendItem => ({
+      label: oneGainColor ? gainLabel : `${gainLabel} · ${gain.metric}`,
+      color: gain.color,
+      kind: "fill",
+    }),
+  );
+  const betweenItems = betweenLabels.map(
+    (label): ForecastLegendItem => ({ label, color: firstColor, kind: "faint-fill" }),
+  );
+  if (metrics.length > 1) {
+    return [
+      ...metrics.map((metric): ForecastLegendItem => ({ label: metric.label, color: metric.color, kind: "line" })),
+      ...betweenItems,
+      ...gainItems,
+      ...withoutItems,
+    ];
+  }
+  return [
+    { label: legendLabels?.historic ?? "Historic results", color: firstColor, kind: "line" },
+    ...(hasProjection
+      ? [{ label: legendLabels?.projected ?? "Projected results", color: firstColor, kind: "dotted-line" as const }]
+      : []),
+    ...withoutItems,
+    ...gainItems,
+    ...betweenItems,
+  ];
+}
+
+export function ForecastLegend(props: { items: ForecastLegendItem[] }) {
+  const { items } = props;
+  return (
+    <ul className="m-0 mb-3 flex list-none flex-wrap gap-x-6 gap-y-2 p-0 typography-small text-muted-foreground">
+      {items.map((item) => (
+        <li key={item.label} className="inline-flex items-center gap-2">
+          {item.kind === "fill" || item.kind === "faint-fill" ? (
+            <span
+              className="h-2.5 w-4 rounded-xs-v4"
+              style={{
+                background: `color-mix(in srgb, ${item.color} ${item.kind === "fill" ? 42 : 10}%, transparent)`,
+              }}
+            />
+          ) : (
+            <span
+              className={cn(
+                "w-5 rounded-sm",
+                item.kind === "line" && "border-t-[2.5px]",
+                item.kind === "dotted-line" && "border-t-[3px] border-dotted",
+                item.kind === "thin-line" && "border-t-2",
+              )}
+              style={{ borderColor: item.color }}
+            />
+          )}
+          {item.label}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/chart/forecast-model.ts

@@ -0,0 +1,130 @@
+import { isPresent } from "@manta-eu/lib/present";
+import type { ChartConfig } from "./chart";
+import { chartColorAt } from "./chart-colors";
+import { forecastDomain, partKey, splitAtToday, type ForecastPart, type ForecastRange } from "./forecast";
+import type { ForecastHoverMetric } from "./ForecastHoverCard";
+import { forecastLegendItems } from "./ForecastLegend";
+
+export type ForecastMetric = {
+  key: string;
+  label: string;
+  color?: string;
+  /** For costs: a drop with the plans shows as a gain in the hover card. */
+  lowerIsBetter?: boolean;
+  /** The same metric if the plans are not approved; the gap between the two is shaded as what the plans add. */
+  withoutPlans?: { key: string; label: string };
+};
+
+export type ForecastBetween = { from: string; to: string; label: string };
+
+export const forecastParts = ["past", "ahead"] as const;
+export const withoutColor = "color-mix(in srgb, var(--color-muted-foreground) 82%, var(--color-card))";
+const metricColors = [
+  "var(--color-accent-foreground)",
+  "color-mix(in srgb, var(--color-accent-foreground) 45%, var(--color-muted-foreground))",
+];
+
+export function metricColor(metric: ForecastMetric, index: number): string {
+  return metric.color ?? metricColors[index] ?? chartColorAt(index);
+}
+
+export function gainName(index: number): string {
+  return `gain-${index}`;
+}
+
+export function betweenName(index: number): string {
+  return `between-${index}`;
+}
+
+type ModelInput = {
+  data: Record<string, unknown>[];
+  today?: string | number;
+  metrics: ForecastMetric[];
+  between: ForecastBetween[];
+  goal?: { value: number };
+  gainLabel: string;
+  legendLabels?: { historic?: string; projected?: string };
+};
+
+/** Everything the chart draws, derived once from its props: split rows, axis, fades, legend and hover metrics. */
+export function buildForecastModel(input: ModelInput) {
+  const { data, today, metrics, between, goal, gainLabel, legendLabels } = input;
+  const overlay = metrics.length > 1;
+  const todayIndex = today === undefined ? -1 : data.findIndex((row) => row.x === today);
+  const withPlans = metrics.flatMap((metric, index) =>
+    isPresent(metric.withoutPlans) ? [{ metric, index, without: metric.withoutPlans }] : [],
+  );
+  const ranges: Record<string, ForecastRange> = {
+    ...Object.fromEntries(
+      withPlans.map((entry) => [gainName(entry.index), { from: entry.without.key, to: entry.metric.key }]),
+    ),
+    ...Object.fromEntries(between.map((range, index) => [betweenName(index), range])),
+  };
+  const lineKeys = [...metrics.map((metric) => metric.key), ...withPlans.map((entry) => entry.without.key)];
+  const emptyKeys = lineKeys.filter((key) => !data.some((row) => typeof row[key] === "number"));
+  const rows = splitAtToday(data, todayIndex, lineKeys, ranges);
+  const values = data.flatMap((row) => lineKeys.map((key) => row[key])).filter((value) => typeof value === "number");
+  const { domain, ticks } = forecastDomain(isPresent(goal) ? [...values, goal.value] : values);
+
+  function meanOf(key: string) {
+    const numbers = data.map((row) => row[key]).filter((value) => typeof value === "number");
+    return numbers.reduce((sum, value) => sum + value, 0) / Math.max(numbers.length, 1);
+  }
+  const lowestIndex = metrics.reduce(
+    (lowest, metric, index) => (meanOf(metric.key) < meanOf(metrics[lowest]?.key ?? "") ? index : lowest),
+    0,
+  );
+  const lowestMetric = metrics[lowestIndex];
+  const onlyWithout = withPlans[0]?.without;
+  function drawsIn(key: string, part: ForecastPart) {
+    return rows.filter((row) => typeof row[partKey(key, part)] === "number").length > 1;
+  }
+  const fadeKeys = forecastParts.flatMap((part) => {
+    const key = overlay
+      ? lowestMetric?.key
+      : onlyWithout && drawsIn(onlyWithout.key, part)
+        ? onlyWithout.key
+        : metrics[0]?.key;
+    return key === undefined ? [] : [{ part, key }];
+  });
+  const firstColor = metrics[0] ? metricColor(metrics[0], 0) : withoutColor;
+
+  return {
+    emptyKeys,
+    todayMissing: today !== undefined && todayIndex < 0 && isPresent(data),
+    overlay,
+    todayIndex,
+    withPlans,
+    rows,
+    domain,
+    ticks,
+    fadeKeys,
+    fadeColor: overlay && lowestMetric ? metricColor(lowestMetric, lowestIndex) : withoutColor,
+    firstColor,
+    config: Object.fromEntries(
+      [...metrics, ...withPlans.map((entry) => entry.without)].map((line) => [line.key, { label: line.label }]),
+    ) satisfies ChartConfig,
+    hoverMetrics: metrics.map(
+      (metric): ForecastHoverMetric => ({
+        key: metric.key,
+        label: metric.label,
+        lowerIsBetter: metric.lowerIsBetter === true,
+        ...(isPresent(metric.withoutPlans) ? { withoutKey: metric.withoutPlans.key } : {}),
+      }),
+    ),
+    legendItems: forecastLegendItems({
+      metrics: metrics.map((metric, index) => ({ label: metric.label, color: metricColor(metric, index) })),
+      withoutLabels: withPlans.map((entry) => entry.without.label),
+      gains: withPlans.map((entry) => ({
+        metric: entry.metric.label,
+        color: metricColor(entry.metric, entry.index),
+      })),
+      gainLabel,
+      betweenLabels: between.map((range) => range.label),
+      firstColor,
+      withoutColor,
+      hasProjection: todayIndex >= 0,
+      ...(legendLabels ? { legendLabels } : {}),
+    }),
+  };
+}

package/src/components/chart/forecast.ts

@@ -0,0 +1,144 @@
+import { isPresent } from "@manta-eu/lib/present";
+
+export type ForecastPart = "past" | "ahead";
+
+export type ForecastRange = { from: string; to: string };
+
+export function partKey(key: string, part: ForecastPart): string {
+  return `${key}~${part}`;
+}
+
+export function rangeKey(name: string, part: ForecastPart): string {
+  return `${name}~range~${part}`;
+}
+
+export const projectedKey = "~projected";
+
+function rangeOf(row: Record<string, unknown>, range: ForecastRange): [number, number] | null {
+  const from = row[range.from];
+  const to = row[range.to];
+  return typeof from === "number" && typeof to === "number" ? [Math.min(from, to), Math.max(from, to)] : null;
+}
+
+/** Splits each line and range at Today: the past part runs up to and including Today, the part ahead starts there. */
+export function splitAtToday(
+  rows: readonly Record<string, unknown>[],
+  todayIndex: number,
+  lineKeys: readonly string[],
+  ranges: Readonly<Record<string, ForecastRange>>,
+): Record<string, unknown>[] {
+  return rows.map((row, index) => {
+    const inPast = todayIndex < 0 || index <= todayIndex;
+    const ahead = todayIndex >= 0 && index >= todayIndex;
+    const split: Record<string, unknown> = { ...row, [projectedKey]: todayIndex >= 0 && index > todayIndex };
+    lineKeys.forEach((key) => {
+      split[partKey(key, "past")] = inPast ? (row[key] ?? null) : null;
+      split[partKey(key, "ahead")] = ahead ? (row[key] ?? null) : null;
+    });
+    Object.entries(ranges).forEach(([name, range]) => {
+      const value = rangeOf(row, range);
+      split[rangeKey(name, "past")] = inPast ? value : null;
+      split[rangeKey(name, "ahead")] = ahead ? value : null;
+    });
+    return split;
+  });
+}
+
+function niceStep(rough: number): number {
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const step = [1, 2, 2.5, 5, 10].find((multiple) => multiple * magnitude >= rough) ?? 10;
+  return step * magnitude;
+}
+
+/** A y range that hugs the values with a little air and round ticks, never dipping below zero for positive data. */
+export function forecastDomain(values: number[], tickCount = 5): { domain: [number, number]; ticks: number[] } {
+  if (!isPresent(values)) {
+    return { domain: [0, 1], ticks: [0, 1] };
+  }
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const spread = max - min || Math.abs(max) || 1;
+  const step = niceStep((spread * 1.2) / (tickCount - 1));
+  const low = Math.floor((min - spread * 0.1) / step) * step;
+  const high = Math.ceil((max + spread * 0.1) / step) * step;
+  const domainLow = min >= 0 ? Math.max(0, low) : low;
+  const ticks = Array.from({ length: Math.round((high - domainLow) / step) + 1 }, (_, index) =>
+    Number((domainLow + index * step).toFixed(10)),
+  );
+  return { domain: [domainLow, high], ticks };
+}
+
+const compact = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+
+export function formatCompact(value: number): string {
+  return compact.format(value);
+}
+
+const whole = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+
+export function formatWhole(value: number): string {
+  return whole.format(value);
+}
+
+/** "+$2,664 with the plans": the signed gap between a metric and its line without plans. */
+export function signedChange(value: number, without: number, format: (value: number) => string): string {
+  const change = value - without;
+  return `${change < 0 ? "-" : "+"}${format(Math.abs(change))}`;
+}
+
+/** The margin and x-axis height the chart passes to recharts; the plot geometry below is derived from them. */
+export const forecastMargin = { top: 24, right: 12, left: 8, bottom: 0 };
+export const forecastXAxisHeight = 30;
+
+/** Where the plot area sits inside a chart of this height, so a pointer's y maps back to a value. */
+export function plotGeometry(chartHeight: number): { top: number; height: number } {
+  return {
+    top: forecastMargin.top,
+    height: chartHeight - forecastMargin.top - forecastMargin.bottom - forecastXAxisHeight,
+  };
+}
+
+/** The value at a pointer's height in the plot, with `domain[0]` at its bottom and `domain[1]` at its top. */
+export function valueAtY(y: number, plotTop: number, plotHeight: number, domain: [number, number]): number {
+  return domain[1] - ((y - plotTop) / plotHeight) * (domain[1] - domain[0]);
+}
+
+/** The metric whose line passes closest to a value at one point: the hover card follows that line. */
+export function nearestMetric(
+  row: Record<string, unknown>,
+  keys: readonly string[],
+  value: number,
+): string | undefined {
+  const distances = keys.flatMap((key) => {
+    const metricValue = row[key];
+    return typeof metricValue === "number" ? [{ key, distance: Math.abs(metricValue - value) }] : [];
+  });
+  return distances.reduce<{ key: string; distance: number } | undefined>(
+    (nearest, candidate) => (nearest === undefined || candidate.distance < nearest.distance ? candidate : nearest),
+    undefined,
+  )?.key;
+}
+
+/** An action already applied (a filled dot) or a plan waiting for approval (a hollow dot), on a metric's line. */
+export type ForecastEvent = {
+  x: string | number;
+  metric: string;
+  status: "applied" | "waiting";
+  title: string;
+  /** The small line above the title; defaults to "Applied" or "Waiting for your approval". */
+  label?: string;
+  value?: string;
+  valueNote?: string;
+  /** Rendered as a plain link in the card (and on the dot when the chart has no `onEventSelect`). */
+  href?: string;
+  linkLabel?: string;
+};
+
+export type ForecastPointPlan = { label: string; value: number };
+
+/** The plans behind one metric's projected value at one point, as the chart's data carries them. */
+export type ForecastPlanShare = { x: string | number; metric: string; plans: ForecastPointPlan[] };
+
+export function plansAt(shares: readonly ForecastPlanShare[], x: string | number, metric: string): ForecastPointPlan[] {
+  return shares.find((share) => share.x === x && share.metric === metric)?.plans ?? [];
+}

package/src/components/chart/index.tsx

@@ -19,6 +19,9 @@ export { ChartFrame, type ChartFrameProps } from "./ChartFrame";
 export { AreaChart, type AreaChartProps } from "./AreaChart";
 export { BarChart, type BarChartProps } from "./BarChart";
 export { ComposedChart, type ComposedChartProps } from "./ComposedChart";
+export { ForecastChart, type ForecastChartProps } from "./ForecastChart";
+export type { ForecastBetween, ForecastMetric } from "./forecast-model";
+export type { ForecastEvent, ForecastPlanShare, ForecastPointPlan } from "./forecast";
 export { LineChart, type LineChartProps } from "./LineChart";
 export { PieChart, type PieChartProps } from "./PieChart";
 export { RadarChart, type RadarChartProps } from "./RadarChart";

package/src/components/modal/index.tsx

@@ -48,16 +48,30 @@ export const DialogOverlay = forwardRef<
   );
 });
 
+export const dialogSizes = ["sm", "md", "lg", "xl", "2xl"] as const;
+
+export type DialogSize = (typeof dialogSizes)[number];
+
+const dialogSizeClasses: Record<DialogSize, string> = {
+  sm: "max-w-[440px]",
+  md: "max-w-[540px]",
+  lg: "max-w-[600px]",
+  xl: "max-w-[920px]",
+  "2xl": "max-w-[1240px]",
+};
+
 type DialogContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
   overlayClassName?: string;
   /** Below `sm`, fill the viewport as a sheet instead of floating as a centered card. */
   fullScreenOnMobile?: boolean;
+  /** Width preset; without one the dialog keeps its 700px default. */
+  size?: DialogSize;
 };
 
 export const DialogContent = forwardRef<ComponentRef<typeof DialogPrimitive.Content>, DialogContentProps>(
   function DialogContent(
-    { className, children, showCloseButton = true, overlayClassName, fullScreenOnMobile = false, ...props },
+    { className, children, showCloseButton = true, overlayClassName, fullScreenOnMobile = false, size, ...props },
     ref,
   ) {
     return (
@@ -73,6 +87,7 @@ export const DialogContent = forwardRef<ComponentRef<typeof DialogPrimitive.Cont
             "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:pointer-events-none",
             "motion-reduce:animate-none",
+            size !== undefined && dialogSizeClasses[size],
             fullScreenOnMobile && [
               "max-sm:top-0! max-sm:left-0! max-sm:translate-x-0! max-sm:translate-y-0!",
               "max-sm:h-dvh! max-sm:max-h-dvh! max-sm:w-full! max-sm:max-w-none!",
@@ -88,7 +103,7 @@ export const DialogContent = forwardRef<ComponentRef<typeof DialogPrimitive.Cont
               data-slot="dialog-close"
               className={cn(
                 "ring-offset-card focus:ring-active-border/50 data-[state=open]:bg-accent",
-                "absolute top-4 right-4 rounded-sm-v4 opacity-70 data-[state=open]:text-muted-foreground",
+                "absolute top-4 right-4 rounded-sm-v4 opacity-70 text-muted-foreground",
                 "hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
                 "transition-opacity motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
               )}

package/src/components/popover/index.tsx

@@ -8,6 +8,7 @@ const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverClose = PopoverPrimitive.Close;
+const PopoverArrow = PopoverPrimitive.Arrow;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -81,4 +82,4 @@ const PopoverItem = React.forwardRef<HTMLButtonElement, PopoverItemProps>((props
 });
 PopoverItem.displayName = "PopoverItem";
 
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverItem, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverItem, PopoverTrigger };

package/src/components/sheet/index.tsx

@@ -64,22 +64,45 @@ export const sheetContentConfig = {
   } as const,
 };
 
+export const sheetSizes = ["sm", "md", "lg"] as const;
+
+export type SheetSize = (typeof sheetSizes)[number];
+
+const sheetSizeClasses: Record<SheetSize, string> = {
+  sm: "w-[420px] max-w-full",
+  md: "w-[480px] max-w-full",
+  lg: "w-[560px] max-w-full",
+};
+
 const sheetContentVariants = tv(sheetContentConfig);
 
-export type SheetContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
-  VariantPropsOf<typeof sheetContentConfig> & {
-    showClose?: boolean;
-  };
+export type SheetSide = NonNullable<VariantPropsOf<typeof sheetContentConfig>["side"]>;
+
+export type SheetContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+  showClose?: boolean;
+} & (
+    | {
+        side?: Extract<SheetSide, "left" | "right">;
+        /** Width preset; without one the sheet keeps its 400px default. */
+        size?: SheetSize;
+      }
+    | { side: Exclude<SheetSide, "left" | "right">; size?: never }
+  );
 
 export const SheetContent = React.forwardRef<React.ComponentRef<typeof DialogPrimitive.Content>, SheetContentProps>(
-  function SheetContent({ side = "right", className, children, showClose = true, ...props }, ref) {
+  function SheetContent({ side = "right", size, className, children, showClose = true, ...props }, ref) {
     return (
       <SheetPortal>
         <SheetOverlay />
         <DialogPrimitive.Content
           ref={ref}
           data-slot="sheet-content"
-          className={cn(sheetContentVariants({ side }), side === "center" ? "gap-6 p-8" : "gap-6 p-6", className)}
+          className={cn(
+            sheetContentVariants({ side }),
+            size !== undefined && sheetSizeClasses[size],
+            side === "center" ? "gap-6 p-8" : "gap-6 p-6",
+            className,
+          )}
           {...props}
         >
           {children}