@sixthshift/design-system 0.1.0

package/src/components/LineChart/LineChart.tsx

@@ -0,0 +1,251 @@
+import { Tooltip } from "@sixthshift/design-system/tooltip";
+import { cn } from "@sixthshift/design-system/utils";
+import type * as React from "react";
+
+export type LineChartDataPoint = {
+  label: string;
+  value: number;
+};
+
+export type LineChartSeries = {
+  data: LineChartDataPoint[];
+  name?: string;
+  color?: string;
+};
+
+export type Interpolation = "linear" | "monotone" | "stepBefore" | "stepAfter";
+
+export type LineChartProps = React.HTMLAttributes<HTMLDivElement> & {
+  series: LineChartSeries[];
+  height?: number;
+  showGrid?: boolean;
+  showAxes?: boolean;
+  showDots?: boolean;
+  showLabels?: boolean;
+  showValues?: boolean;
+  interpolation?: Interpolation;
+  fillArea?: boolean;
+  yMin?: number;
+  yMax?: number;
+  yTicks?: number;
+  showTooltip?: boolean;
+  formatTooltip?: (point: LineChartDataPoint, seriesName?: string) => string;
+  formatValue?: (value: number) => string;
+};
+
+const SERIES_COLORS = ["var(--fg-brand)", "var(--fg-success)", "var(--fg-warning)", "var(--fg-danger)", "var(--fg-subtle)"];
+
+const PADDING = { top: 12, right: 16, bottom: 32, left: 48 };
+const PADDING_NO_AXES = { top: 8, right: 8, bottom: 8, left: 8 };
+
+function niceScale(min: number, max: number, ticks: number) {
+  // Defensive: a non-finite bound would make every derived tick NaN.
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    return { min: 0, max: 1, step: 1 / ticks };
+  }
+  if (min === max) {
+    const pad = min === 0 ? 1 : Math.abs(min) * 0.1;
+    return { min: min - pad, max: max + pad, step: (pad * 2) / ticks };
+  }
+  const range = max - min;
+  const roughStep = range / ticks;
+  const magnitude = 10 ** Math.floor(Math.log10(roughStep));
+  const residual = roughStep / magnitude;
+  const niceStep = residual <= 1.5 ? magnitude : residual <= 3 ? 2 * magnitude : residual <= 7 ? 5 * magnitude : 10 * magnitude;
+  const niceMin = Math.floor(min / niceStep) * niceStep;
+  const niceMax = Math.ceil(max / niceStep) * niceStep;
+  return { min: niceMin, max: niceMax, step: niceStep };
+}
+
+function buildPath(points: { x: number; y: number }[], interpolation: Interpolation): string {
+  if (points.length === 0) return "";
+  const parts = [`M ${points[0]!.x} ${points[0]!.y}`];
+
+  switch (interpolation) {
+    case "monotone":
+      for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1]!;
+        const curr = points[i]!;
+        const cpx = (prev.x + curr.x) / 2;
+        parts.push(`C ${cpx} ${prev.y}, ${cpx} ${curr.y}, ${curr.x} ${curr.y}`);
+      }
+      break;
+    case "stepAfter":
+      for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1]!;
+        const curr = points[i]!;
+        parts.push(`L ${curr.x} ${prev.y}`);
+        parts.push(`L ${curr.x} ${curr.y}`);
+      }
+      break;
+    case "stepBefore":
+      for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1]!;
+        const curr = points[i]!;
+        parts.push(`L ${prev.x} ${curr.y}`);
+        parts.push(`L ${curr.x} ${curr.y}`);
+      }
+      break;
+    default:
+      for (let i = 1; i < points.length; i++) {
+        parts.push(`L ${points[i]!.x} ${points[i]!.y}`);
+      }
+      break;
+  }
+
+  return parts.join(" ");
+}
+
+export const LineChart = ({
+  series,
+  height = 200,
+  showGrid = true,
+  showAxes = true,
+  showDots = true,
+  showLabels = true,
+  showValues = false,
+  interpolation = "monotone",
+  fillArea = false,
+  yMin: yMinProp,
+  yMax: yMaxProp,
+  yTicks = 4,
+  showTooltip = false,
+  formatTooltip,
+  formatValue = (v) => String(v),
+  className,
+  ...rest
+}: LineChartProps) => {
+  const allValues = series.flatMap((s) => s.data.map((d) => d.value));
+  // Math.min() of an empty list is Infinity, which propagates NaN through the
+  // whole scale. Fall back to a plain 0-1 axis when there is no data.
+  const rawMin = yMinProp ?? (allValues.length > 0 ? Math.min(...allValues) : 0);
+  const rawMax = yMaxProp ?? (allValues.length > 0 ? Math.max(...allValues) : 1);
+  const scale = niceScale(rawMin, rawMax, yTicks);
+
+  const labelSet = new Set<string>();
+  for (const s of series) {
+    for (const d of s.data) {
+      labelSet.add(d.label);
+    }
+  }
+  const labels = [...labelSet];
+  const labelCount = labels.length;
+  const labelIndex = new Map(labels.map((l, i) => [l, i]));
+
+  const padding = showAxes ? PADDING : PADDING_NO_AXES;
+  const viewWidth = 600;
+  const chartW = viewWidth - padding.left - padding.right;
+  const chartH = height - padding.top - padding.bottom;
+
+  const xStep = labelCount > 1 ? chartW / (labelCount - 1) : 0;
+
+  function toX(i: number) {
+    return padding.left + i * xStep;
+  }
+
+  function toY(v: number) {
+    const ratio = (v - scale.min) / (scale.max - scale.min);
+    return padding.top + chartH - ratio * chartH;
+  }
+
+  const yTickValues: number[] = [];
+  for (let v = scale.min; v <= scale.max + scale.step * 0.01; v += scale.step) {
+    yTickValues.push(Math.round(v * 1e6) / 1e6);
+  }
+
+  function tooltipText(point: LineChartDataPoint, seriesName?: string) {
+    if (formatTooltip) return formatTooltip(point, seriesName);
+    const prefix = seriesName ? `${seriesName}: ` : `${point.label}: `;
+    return `${prefix}${formatValue(point.value)}`;
+  }
+
+  return (
+    <div {...rest} className={cn("relative w-full", className)}>
+      <svg viewBox={`0 0 ${viewWidth} ${height}`} className="w-full" preserveAspectRatio="xMidYMid meet" role="img">
+        <title>Line chart</title>
+        {showGrid &&
+          yTickValues.map((v) => (
+            <line
+              key={`grid-${v}`}
+              x1={padding.left}
+              y1={toY(v)}
+              x2={viewWidth - padding.right}
+              y2={toY(v)}
+              className="stroke-border-subtle"
+              strokeWidth={1}
+              strokeDasharray="4 4"
+            />
+          ))}
+
+        {showAxes && (
+          <>
+            <line x1={padding.left} y1={padding.top} x2={padding.left} y2={padding.top + chartH} className="stroke-border-normal" strokeWidth={1} />
+            <line
+              x1={padding.left}
+              y1={padding.top + chartH}
+              x2={viewWidth - padding.right}
+              y2={padding.top + chartH}
+              className="stroke-border-normal"
+              strokeWidth={1}
+            />
+            {yTickValues.map((v) => (
+              <text key={`ytick-${v}`} x={padding.left - 8} y={toY(v)} textAnchor="end" dominantBaseline="middle" className="fill-fg-subtle" fontSize={11}>
+                {formatValue(v)}
+              </text>
+            ))}
+          </>
+        )}
+
+        {showLabels &&
+          labels.map((label, i) => (
+            <text key={`xlabel-${label}`} x={toX(i)} y={height - 4} textAnchor="middle" className="fill-fg-subtle" fontSize={11}>
+              {label}
+            </text>
+          ))}
+
+        {series.map((s, si) => {
+          const color = s.color ?? SERIES_COLORS[si % SERIES_COLORS.length];
+          const points = s.data.map((d) => ({ x: toX(labelIndex.get(d.label)!), y: toY(d.value) }));
+          const path = buildPath(points, interpolation);
+
+          return (
+            <g key={s.name ?? si}>
+              {fillArea && path && (
+                <path
+                  d={`${path} L ${points[points.length - 1]!.x} ${padding.top + chartH} L ${points[0]!.x} ${padding.top + chartH} Z`}
+                  fill={color}
+                  opacity={0.1}
+                />
+              )}
+              {path && <path d={path} fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />}
+              {showDots && points.map((p, pi) => <circle key={`dot-${s.data[pi]!.label}`} cx={p.x} cy={p.y} r={3} fill={color} />)}
+              {showValues &&
+                points.map((p, vi) => (
+                  <text key={`val-${s.data[vi]!.label}`} x={p.x} y={p.y - 10} textAnchor="middle" className="fill-fg-normal" fontSize={10} fontWeight={600}>
+                    {formatValue(s.data[vi]!.value)}
+                  </text>
+                ))}
+            </g>
+          );
+        })}
+      </svg>
+
+      {showTooltip &&
+        series.map((s, si) =>
+          s.data.map((d) => {
+            const xPct = (toX(labelIndex.get(d.label)!) / viewWidth) * 100;
+            const yPct = (toY(d.value) / height) * 100;
+
+            return (
+              <Tooltip key={`tip-${s.name ?? si}-${d.label}`} delayShow={0}>
+                <Tooltip.Trigger asChild>
+                  <span className="absolute block -translate-x-1/2 -translate-y-1/2" style={{ left: `${xPct}%`, top: `${yPct}%`, width: 16, height: 16 }} />
+                </Tooltip.Trigger>
+                <Tooltip.Body>{tooltipText(d, s.name)}</Tooltip.Body>
+              </Tooltip>
+            );
+          })
+        )}
+    </div>
+  );
+};

package/src/components/LineChart/index.ts

@@ -0,0 +1 @@
+export { type Interpolation, LineChart, type LineChartDataPoint, type LineChartProps, type LineChartSeries } from "./LineChart";

package/src/components/Markdown/Markdown.tsx

@@ -0,0 +1,40 @@
+import { Body } from "@sixthshift/design-system/body";
+import { Emphasis } from "@sixthshift/design-system/emphasis";
+import { Heading } from "@sixthshift/design-system/heading";
+import { cn } from "@sixthshift/design-system/utils";
+import ReactMarkdown from "react-markdown";
+
+export type MarkdownProps = {
+  children: string;
+  className?: string;
+};
+
+export const Markdown = ({ children, className }: MarkdownProps) => (
+  <div className={cn("flex flex-col", className)}>
+    <ReactMarkdown
+      components={{
+        h1: ({ children }) => <Heading as="h3">{children}</Heading>,
+        h2: ({ children }) => <Heading as="h4">{children}</Heading>,
+        h3: ({ children }) => <Emphasis className="block">{children}</Emphasis>,
+        p: ({ children }) => (
+          <Body as="p" className="mt-2">
+            {children}
+          </Body>
+        ),
+        a: ({ href, children }) => (
+          <a href={href} target="_blank" rel="noopener noreferrer" className="text-fg-brand underline">
+            {children}
+          </a>
+        ),
+        ul: ({ children }) => <ul className="mt-2 flex list-disc flex-col gap-1 pl-5">{children}</ul>,
+        ol: ({ children }) => <ol className="mt-2 flex list-decimal flex-col gap-1 pl-5">{children}</ol>,
+        li: ({ children }) => <li className="text-fg-default text-sm">{children}</li>,
+        code: ({ children }) => <code className="rounded bg-bg-subtle px-1.5 py-0.5 font-mono text-fg-emphasis text-xs">{children}</code>,
+        pre: ({ children }) => <pre className="mt-2 overflow-x-auto rounded-md bg-bg-subtle p-3 font-mono text-xs">{children}</pre>,
+      }}
+    >
+      {children}
+    </ReactMarkdown>
+  </div>
+);
+Markdown.displayName = "Markdown";

package/src/components/Markdown/index.ts

@@ -0,0 +1 @@
+export { Markdown, type MarkdownProps } from "./Markdown";

package/src/components/Message/Message.tsx

@@ -0,0 +1,59 @@
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { MessageBody } from "./components/MessageBody";
+import { MessageDescription } from "./components/MessageDescription";
+import { MessageIcon } from "./components/MessageIcon";
+import { MessageTitle } from "./components/MessageTitle";
+
+export const messageVariants = cva("flex gap-3 rounded-lg border p-4 text-sm [&>svg]:shrink-0", {
+  variants: {
+    intent: {
+      neutral: "border-border-normal bg-bg-normal text-fg-normal",
+      success: "border-border-success bg-bg-success-subtle text-fg-on-success-subtle",
+      warning: "border-border-warning bg-bg-warning-subtle text-fg-on-warning-subtle",
+      danger: "border-border-danger bg-bg-danger-subtle text-fg-on-danger-subtle",
+    },
+    size: {
+      default: "p-4",
+      sm: "gap-2 p-3 text-xs",
+    },
+  },
+  defaultVariants: {
+    intent: "neutral",
+    size: "default",
+  },
+});
+
+export type MessageProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof messageVariants> & {
+    /** Simple API: Optional title displayed above children */
+    title?: React.ReactNode;
+    /** Simple API: Optional icon displayed on the left */
+    icon?: React.ReactNode;
+  };
+
+export const Message = React.forwardRef<HTMLDivElement, MessageProps>(({ className, intent = "neutral", size, title, icon, children, ...props }, ref) => {
+  const hasCompoundChildren = React.Children.toArray(children).some(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.type === MessageIcon || child.type === MessageBody || child.type === MessageTitle || child.type === MessageDescription)
+  );
+
+  return (
+    <div ref={ref} role="alert" className={cn(messageVariants({ intent, size, className }))} {...props}>
+      {hasCompoundChildren ? (
+        children
+      ) : (
+        <>
+          {icon && <MessageIcon>{icon}</MessageIcon>}
+          <MessageBody>
+            {title && <MessageTitle>{title}</MessageTitle>}
+            <MessageDescription>{children}</MessageDescription>
+          </MessageBody>
+        </>
+      )}
+    </div>
+  );
+});
+Message.displayName = "Message";

package/src/components/Message/components/MessageBody.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type MessageBodyProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const MessageBody = React.forwardRef<HTMLDivElement, MessageBodyProps>(({ className, ...props }, ref) => {
+  return <div ref={ref} className={cn("flex min-w-0 flex-1 flex-col gap-1", className)} {...props} />;
+});
+MessageBody.displayName = "MessageBody";

package/src/components/Message/components/MessageDescription.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type MessageDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const MessageDescription = React.forwardRef<HTMLDivElement, MessageDescriptionProps>(({ className, ...props }, ref) => {
+  return <div ref={ref} className={cn("leading-relaxed opacity-90", className)} {...props} />;
+});
+MessageDescription.displayName = "MessageDescription";

package/src/components/Message/components/MessageIcon.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type MessageIconProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const MessageIcon = React.forwardRef<HTMLDivElement, MessageIconProps>(({ className, children, ...props }, ref) => {
+  return (
+    <div ref={ref} className={cn("flex h-4 w-4 shrink-0", className)} {...props}>
+      {children}
+    </div>
+  );
+});
+MessageIcon.displayName = "MessageIcon";

package/src/components/Message/components/MessageTitle.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type MessageTitleProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const MessageTitle = React.forwardRef<HTMLDivElement, MessageTitleProps>(({ className, ...props }, ref) => {
+  return <div ref={ref} className={cn("font-medium leading-none", className)} {...props} />;
+});
+MessageTitle.displayName = "MessageTitle";

package/src/components/Message/index.ts

@@ -0,0 +1,10 @@
+export type { MessageBodyProps } from "./components/MessageBody";
+export { MessageBody } from "./components/MessageBody";
+export type { MessageDescriptionProps } from "./components/MessageDescription";
+export { MessageDescription } from "./components/MessageDescription";
+export type { MessageIconProps } from "./components/MessageIcon";
+export { MessageIcon } from "./components/MessageIcon";
+export type { MessageTitleProps } from "./components/MessageTitle";
+export { MessageTitle } from "./components/MessageTitle";
+export type { MessageProps } from "./Message";
+export { Message, messageVariants } from "./Message";

package/src/components/MetricList/MetricList.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@sixthshift/design-system/utils";
+import type { ReactNode } from "react";
+
+export type MetricListProps = {
+  /** Metric rows */
+  children: ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+};
+
+export const MetricList = ({ children, className }: MetricListProps) => {
+  return <div className={cn("flex flex-col gap-2 text-fg-subtle", className)}>{children}</div>;
+};

package/src/components/MetricList/MetricRow.tsx

@@ -0,0 +1,30 @@
+import { cn } from "@sixthshift/design-system/utils";
+import type { ReactNode } from "react";
+
+export type MetricRowProps = {
+  /** Label displayed on the left */
+  label: string;
+  /** Value displayed on the right, can be string or ReactNode for complex content */
+  value: ReactNode;
+  /** Optional variant for styling the value */
+  valueVariant?: "normal" | "success" | "warning" | "danger" | "info";
+  /** Additional CSS classes */
+  className?: string;
+};
+
+const valueVariants = {
+  normal: "text-fg-normal",
+  success: "text-fg-success",
+  warning: "text-fg-warning",
+  danger: "text-fg-danger",
+  info: "text-fg-brand",
+};
+
+export const MetricRow = ({ label, value, valueVariant = "normal", className }: MetricRowProps) => {
+  return (
+    <div className={cn("flex justify-between", className)}>
+      <span>{label}</span>
+      <span className={valueVariants[valueVariant]}>{value}</span>
+    </div>
+  );
+};

package/src/components/MetricList/index.ts

@@ -0,0 +1,2 @@
+export { MetricList, type MetricListProps } from "./MetricList";
+export { MetricRow, type MetricRowProps } from "./MetricRow";

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,146 @@
+import { FloatingFocusManager, FloatingOverlay, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+import { useMergedFloatingRef, usePresence } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { type HTMLAttributes, type ReactNode, useCallback, useContext, useEffect, useMemo } from "react";
+import { ModalBody, ModalContext, ModalFooter, ModalHeader } from "./components";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type ModalProps = Pick<HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+  /**
+   * Called when the modal's open state should change. Today Modal is mount-driven
+   * (parent conditionally renders), so this fires only with `false` on dismissal.
+   * The signature matches Popover/Tooltip/HoverCard/Tabs for API consistency and
+   * leaves room to evolve Modal into a state-driven primitive later.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /** Modal size */
+  size?: "sm" | "md" | "lg" | "full";
+  /** Children - use Modal.Header, Modal.Body, Modal.Footer */
+  children: ReactNode;
+  /**
+   * When true (default), clicking outside closes the modal.
+   * When false, the modal can only be closed programmatically.
+   * Note: Escape key is handled by OverlayContext for proper stack ordering.
+   */
+  dismissable?: boolean;
+  /** When true, shows a close (X) button in the modal header */
+  closable?: boolean;
+  /** Vertical alignment on desktop. "center" (default) or "top" (anchored near top, content grows down) */
+  align?: "center" | "top";
+};
+
+// =============================================================================
+// Size classes
+// =============================================================================
+
+const sizeClasses = {
+  sm: "sm:w-80",
+  md: "sm:w-[28rem]",
+  lg: "sm:w-[36rem]",
+  full: "sm:w-[95%] sm:h-[95%]",
+};
+
+// =============================================================================
+// Modal
+// =============================================================================
+
+const ModalRoot = ({ onOpenChange, size = "md", className, style, children, dismissable = true, closable, align = "center" }: ModalProps) => {
+  // Prefer explicit prop over context (context is set by useModal's overlay system)
+  const contextValue = useContext(ModalContext);
+  // Context provides a parameterless onClose for programmatic modals; adapt to the boolean shape.
+  const handleDismiss = useCallback(() => {
+    if (onOpenChange) onOpenChange(false);
+    else contextValue?.onClose();
+  }, [onOpenChange, contextValue]);
+
+  const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
+
+  useEffect(() => {
+    show();
+  }, [show]);
+
+  const handleClose = useCallback(() => {
+    hide(handleDismiss);
+  }, [handleDismiss, hide]);
+
+  const { refs, context } = useFloating({
+    open: true,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) handleClose();
+    },
+  });
+
+  const mergedRef = useMergedFloatingRef(refs, presenceRef);
+
+  const dismiss = useDismiss(context, {
+    enabled: dismissable,
+    // OverlayContext handles escape key for proper stack ordering
+    escapeKey: false,
+    outsidePress: true,
+    outsidePressEvent: "mousedown",
+  });
+
+  const role = useRole(context, {
+    role: "dialog",
+  });
+
+  const { getFloatingProps } = useInteractions([dismiss, role]);
+
+  const modalContextValue = useMemo(() => ({ onClose: handleClose, closable }), [closable, handleClose]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!isMounted) return null;
+
+  const isEntering = state === "entering";
+  const isExiting = state === "exiting";
+
+  return (
+    <FloatingFocusManager context={context} modal>
+      <FloatingOverlay lockScroll className={cn("fixed inset-0 z-modal bg-bg-overlay", isEntering && "animate-fade-in", isExiting && "animate-fade-out")}>
+        <div
+          ref={mergedRef}
+          role="dialog"
+          aria-modal="true"
+          tabIndex={-1}
+          data-state={state}
+          className={cn(
+            "fixed flex flex-col overflow-hidden outline-hidden",
+            "rounded-xl border border-border-normal bg-bg-normal",
+            // Size
+            sizeClasses[size],
+            // Cap height so ModalBody scrolls instead of overflowing the viewport
+            "max-h-[95%]",
+            // Mobile: slide up from bottom, full width
+            "max-sm:inset-x-0 max-sm:bottom-0 max-sm:rounded-b-none",
+            isEntering && "max-sm:animate-slide-up-in",
+            isExiting && "max-sm:animate-slide-up-out",
+            // Desktop: horizontal center + vertical alignment
+            "sm:left-1/2 sm:-translate-x-1/2",
+            align === "center" && "sm:top-1/2 sm:-translate-y-1/2",
+            align === "top" && "sm:top-[15vh]",
+            isEntering && "sm:animate-fade-in",
+            isExiting && "sm:animate-fade-out",
+            className
+          )}
+          style={style}
+          {...getFloatingProps({})}
+        >
+          <ModalContext.Provider value={modalContextValue}>{children}</ModalContext.Provider>
+        </div>
+      </FloatingOverlay>
+    </FloatingFocusManager>
+  );
+};
+ModalRoot.displayName = "Modal";
+
+// =============================================================================
+// Compound Component Export
+// =============================================================================
+
+export const Modal = Object.assign(ModalRoot, {
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter,
+});

package/src/components/Modal/components/ModalBody.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex-1 overflow-y-auto p-6 pt-0", className)} {...props} />
+));
+ModalBody.displayName = "ModalBody";

package/src/components/Modal/components/ModalContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, type PropsWithChildren, useContext, useMemo } from "react";
+
+/**
+ * Internal close signal for a mounted modal. App-level callback — no event arg.
+ * Used by ModalHeader's X button and by `useModal`'s programmatic overlay system.
+ */
+export type OnClose = () => void;
+
+interface ModalContextValue {
+  onClose: OnClose;
+  closable?: boolean | undefined;
+}
+
+export const ModalContext = createContext<ModalContextValue | null>(null);
+
+export function useModalContext() {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error("useModalContext must be used within a Modal");
+  }
+  return context;
+}
+
+export const ModalContextProvider = ({ onClose, closable, children }: PropsWithChildren<{ onClose: OnClose; closable?: boolean }>) => {
+  const value = useMemo(() => ({ onClose, closable }), [onClose, closable]);
+  return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>;
+};

package/src/components/Modal/components/ModalFooter.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+));
+ModalFooter.displayName = "ModalFooter";