@dreamboard-games/ui-sdk 0.0.41

package/src/components/ChromeSuppressionContext.tsx

@@ -0,0 +1,70 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+
+type ChromeSuppressionRegistration = (id: string, suppressed: boolean) => void;
+
+const ChromeSuppressionContext =
+  createContext<ChromeSuppressionRegistration | null>(null);
+
+export function ChromeSuppressionProvider({
+  children,
+  onSuppressedChange,
+}: {
+  children: ReactNode;
+  onSuppressedChange: (suppressed: boolean) => void;
+}) {
+  const [suppressedEntries, setSuppressedEntries] = useState<
+    ReadonlySet<string>
+  >(() => new Set());
+
+  const register = useCallback<ChromeSuppressionRegistration>(
+    (id, suppressed) => {
+      setSuppressedEntries((current) =>
+        updateSuppressedEntries(current, id, suppressed),
+      );
+    },
+    [],
+  );
+  const suppressed = suppressedEntries.size > 0;
+
+  useEffect(() => {
+    onSuppressedChange(suppressed);
+  }, [onSuppressedChange, suppressed]);
+
+  const value = useMemo(() => register, [register]);
+
+  return (
+    <ChromeSuppressionContext.Provider value={value}>
+      {children}
+    </ChromeSuppressionContext.Provider>
+  );
+}
+
+export function useChromeSuppression(id: string, suppressed: boolean) {
+  const register = useContext(ChromeSuppressionContext);
+
+  useEffect(() => {
+    if (!register) return;
+    register(id, suppressed);
+    return () => register(id, false);
+  }, [id, register, suppressed]);
+}
+
+function updateSuppressedEntries(
+  current: ReadonlySet<string>,
+  id: string,
+  suppressed: boolean,
+) {
+  if (current.has(id) === suppressed) return current;
+  const next = new Set(current);
+  if (suppressed) next.add(id);
+  else next.delete(id);
+  return next;
+}

package/src/components/CostDisplay.test.tsx

@@ -0,0 +1,23 @@
+import { expect, test } from "bun:test";
+import { renderToString } from "react-dom/server";
+import { Coins } from "lucide-react";
+import { CostDisplay, type ResourceDefinition } from "./CostDisplay.js";
+
+const resourceDefs: ResourceDefinition[] = [
+  { type: "gold", label: "Gold", icon: Coins },
+  { type: "wood", label: "Wood" },
+];
+
+test("CostDisplay renders shadcn tooltip triggers for each resource cost", () => {
+  const html = renderToString(
+    <CostDisplay
+      cost={{ gold: 3, wood: 2 }}
+      currentResources={{ gold: 4, wood: 1 }}
+      resourceDefs={resourceDefs}
+    />,
+  );
+
+  expect(html).toContain('data-slot="tooltip-trigger"');
+  expect(html).toContain('aria-label="Cost: 3 Gold, 2 Wood (cannot afford)"');
+  expect(html).not.toContain("title=");
+});

package/src/components/CostDisplay.tsx

@@ -0,0 +1,145 @@
+/** Shows resource costs with affordability indication (green/red). */
+
+import { clsx } from "clsx";
+import type { ComponentType } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../internal/ui/tooltip.js";
+
+export interface ResourceDefinition {
+  type: string;
+  label: string;
+  icon?: ComponentType<{ className?: string }>;
+  color?: string;
+}
+
+export interface CostDisplayProps {
+  /** Cost requirements keyed by resource type */
+  cost: Record<string, number>;
+  /** Current resources to check affordability */
+  currentResources?: Record<string, number>;
+  resourceDefs: ResourceDefinition[];
+  size?: "sm" | "md";
+  layout?: "inline" | "stacked";
+  className?: string;
+}
+export function CostDisplay({
+  cost,
+  currentResources,
+  resourceDefs,
+  size = "sm",
+  layout = "inline",
+  className,
+}: CostDisplayProps) {
+  const resourceMap = Object.fromEntries(resourceDefs.map((r) => [r.type, r]));
+
+  const sizeClasses = {
+    sm: { icon: "w-3 h-3", text: "text-xs", gap: "gap-0.5" },
+    md: { icon: "w-4 h-4", text: "text-sm", gap: "gap-1" },
+  };
+
+  const styles = sizeClasses[size];
+
+  // Calculate total affordability for aria label
+  const canAffordAll =
+    !currentResources ||
+    Object.entries(cost).every(
+      ([type, amount]) => (currentResources[type] ?? 0) >= amount,
+    );
+
+  const costEntries = Object.entries(cost).filter(
+    ([, amount]) => amount !== undefined && amount > 0,
+  );
+
+  if (costEntries.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={clsx(
+        "flex",
+        styles.gap,
+        layout === "stacked" && "flex-col",
+        layout === "inline" && "flex-row flex-wrap items-center",
+        className,
+      )}
+      role="list"
+      aria-label={`Cost: ${costEntries.map(([type, amount]) => `${amount} ${resourceMap[type]?.label || type}`).join(", ")}${currentResources ? (canAffordAll ? " (affordable)" : " (cannot afford)") : ""}`}
+    >
+      <TooltipProvider delayDuration={200}>
+        {costEntries.map(([type, amount]) => {
+          const def = resourceMap[type];
+          const have = currentResources?.[type] ?? Infinity;
+          const canAfford = have >= amount;
+          const Icon = def?.icon;
+          const label = def?.label || type;
+
+          return (
+            <Tooltip key={type}>
+              <TooltipTrigger asChild>
+                <div
+                  className={clsx(
+                    "flex cursor-help items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-white/70",
+                    styles.gap,
+                    styles.text,
+                    currentResources && !canAfford && "text-red-400",
+                    currentResources && canAfford && "text-green-400",
+                    !currentResources && "text-slate-300",
+                  )}
+                  role="listitem"
+                  tabIndex={0}
+                >
+                  {Icon && <Icon className={styles.icon} aria-hidden="true" />}
+                  <span className="font-semibold">{amount}</span>
+                  {!Icon && (
+                    <span className="text-[10px] opacity-70">
+                      {def?.label?.slice(0, 3) || type.slice(0, 3)}
+                    </span>
+                  )}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent
+                side="top"
+                sideOffset={6}
+                className="max-w-xs text-left"
+              >
+                <p className="font-sans text-sm font-bold">{label}</p>
+                <p className="font-sans mt-1 text-xs font-normal opacity-90">
+                  {formatCostAvailability({
+                    amount,
+                    canAfford,
+                    have,
+                  })}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
+      </TooltipProvider>
+    </div>
+  );
+}
+
+/** Second line under the resource name — avoids repeating {@link label} in the tooltip. */
+function formatCostAvailability({
+  amount,
+  canAfford,
+  have,
+}: {
+  amount: number;
+  canAfford: boolean;
+  have: number;
+}) {
+  if (!Number.isFinite(have)) {
+    return `Cost: ${amount}.`;
+  }
+
+  const missing = Math.max(0, amount - have);
+  return canAfford
+    ? `Cost: ${amount}. You have ${have}.`
+    : `Cost: ${amount}. You have ${have}; short by ${missing}.`;
+}