@nswds/app 1.97.15 → 1.98.0

package/dist/index.cjs

@@ -40,6 +40,8 @@ var LabelPrimitive = require('@radix-ui/react-label');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var TabsPrimitives = require('@radix-ui/react-tabs');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var TogglePrimitive = require('@radix-ui/react-toggle');
 var cmdk = require('cmdk');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
@@ -47,8 +49,6 @@ var reactTable = require('@tanstack/react-table');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var vaul = require('vaul');
 var reactHookForm = require('react-hook-form');
-var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
-var TogglePrimitive = require('@radix-ui/react-toggle');
 var Image2 = require('next/image');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var inputOtp = require('input-otp');
@@ -110,11 +110,11 @@ var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var TabsPrimitives__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitives);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
-var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
-var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 var Image2__default = /*#__PURE__*/_interopDefault(Image2);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
 var MenubarPrimitive__namespace = /*#__PURE__*/_interopNamespace(MenubarPrimitive);
@@ -14972,6 +14972,734 @@ function ColorCard({ name, token, hex: hex2, rgb: rgb2, hsl, oklch: oklch2, form
     ] })
   ] }) });
 }
+var recommendedBackgroundTones = [100, 200, 400, 500, 600, 700, 800];
+var AAA_NORMAL_TEXT_RATIO = 7;
+function extractTone(token) {
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : 0;
+}
+function formatFamilyLabel(name, key) {
+  if (key === "grey") return "Grey";
+  return name.replace(/^NSW Aboriginal\s+/i, "").replace(/^NSW\s+/i, "").trim();
+}
+function toPairingColor(color2) {
+  return {
+    ...color2,
+    tone: extractTone(color2.token)
+  };
+}
+function getPreferredForegroundTone(backgroundTone) {
+  if (backgroundTone <= 200) return 800;
+  if (backgroundTone <= 500) return 700;
+  if (backgroundTone <= 650) return 250;
+  return 200;
+}
+function getPairRating(contrastRatio) {
+  if (contrastRatio >= 7) return "AAA";
+  if (contrastRatio >= 4.5) return "AA";
+  return "AA Large";
+}
+function isPreferredDirection(backgroundTone, foregroundTone, preferredForegroundTone) {
+  if (preferredForegroundTone < backgroundTone) {
+    return foregroundTone < backgroundTone;
+  }
+  return foregroundTone > backgroundTone;
+}
+function buildPair(background, foreground) {
+  const contrastRatio = culori__namespace.wcagContrast(background.hex, foreground.hex);
+  return {
+    id: `${background.token}:${foreground.token}`,
+    background,
+    foreground,
+    contrastRatio,
+    passes: {
+      aaLarge: contrastRatio >= 3,
+      aaText: contrastRatio >= 4.5,
+      aaaLarge: contrastRatio >= 4.5,
+      aaaText: contrastRatio >= 7
+    },
+    rating: getPairRating(contrastRatio)
+  };
+}
+function pickForeground(colorsToPair, background, minimumRatio) {
+  const preferredForegroundTone = getPreferredForegroundTone(background.tone);
+  const passingCandidates = colorsToPair.filter((color2) => color2.token !== background.token).map((color2) => buildPair(background, color2)).filter((pair) => pair.contrastRatio >= minimumRatio);
+  if (passingCandidates.length === 0) return null;
+  const preferredCandidates = passingCandidates.filter(
+    (pair) => isPreferredDirection(background.tone, pair.foreground.tone, preferredForegroundTone)
+  );
+  const candidates = preferredCandidates.length > 0 ? preferredCandidates : passingCandidates;
+  return candidates.sort((left, right) => {
+    const leftTargetDelta = Math.abs(left.foreground.tone - preferredForegroundTone);
+    const rightTargetDelta = Math.abs(right.foreground.tone - preferredForegroundTone);
+    if (leftTargetDelta !== rightTargetDelta) {
+      return leftTargetDelta - rightTargetDelta;
+    }
+    const leftToneGap = Math.abs(left.foreground.tone - background.tone);
+    const rightToneGap = Math.abs(right.foreground.tone - background.tone);
+    if (leftToneGap !== rightToneGap) {
+      return rightToneGap - leftToneGap;
+    }
+    return right.contrastRatio - left.contrastRatio;
+  })[0];
+}
+function buildRecommendedPairs(colorsToPair, minimumRatio) {
+  const backgrounds = recommendedBackgroundTones.map((tone) => colorsToPair.find((color2) => color2.tone === tone)).filter((color2) => Boolean(color2));
+  const recommendedPairs = [];
+  for (const background of backgrounds) {
+    const pair = pickForeground(colorsToPair, background, minimumRatio);
+    if (!pair || recommendedPairs.some((item) => item.id === pair.id)) {
+      continue;
+    }
+    recommendedPairs.push(pair);
+  }
+  return recommendedPairs;
+}
+function buildRecommendedCollections(minimumRatio) {
+  return {
+    brand: Object.entries(colors.brand).map(([key, palette]) => {
+      const scale2 = palette.colors.map(toPairingColor);
+      return {
+        key,
+        label: formatFamilyLabel(palette.name, key),
+        paletteName: palette.name,
+        colors: scale2,
+        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
+      };
+    }),
+    aboriginal: Object.entries(colors.aboriginal).map(([key, palette]) => {
+      const scale2 = palette.colors.map(toPairingColor);
+      return {
+        key,
+        label: formatFamilyLabel(palette.name, key),
+        paletteName: palette.name,
+        colors: scale2,
+        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
+      };
+    })
+  };
+}
+var recommendedAaaPairingCollections = buildRecommendedCollections(AAA_NORMAL_TEXT_RATIO);
+function getPairingColorValue(color2, format) {
+  return getColorValue(color2, format);
+}
+var styles3 = {
+  base: [
+    // Base
+    "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium bg-transparent transition-all whitespace-nowrap cursor-pointer border-(--toggle-border) [--toggle-border:var(--color-grey-200)] text-grey-800",
+    // States
+    "data-[state=on]:bg-grey-100 data-[state=on]:text-grey-850",
+    // Hover
+    "hover:bg-grey-100 hover:text-grey-850",
+    // Focus
+    "focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-(--toggle-border)",
+    // Dark mode
+    "dark:text-white",
+    // Dark mode states
+    "dark:data-[state=on]:bg-white/10 dark:data-[state=on]:text-white",
+    // Dark mode hover
+    "dark:hover:bg-white/10 dark:hover:text-white",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50",
+    // Icon
+    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
+    // Aria invalid
+    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+    // Aria invalid dark mode
+    "dark:aria-invalid:ring-destructive/40"
+  ],
+  outline: [
+    // Base
+    "text-grey-800 border [--toggle-border:var(--color-grey-300)]",
+    // States
+    "hover:[--toggle-border:var(--color-grey-400)]",
+    // Dark mode
+    "dark:[--toggle-border:white]/40",
+    // Dark mode states
+    "dark:hover:[--toggle-border:white]/50",
+    // Data on
+    "data-[state=on]:bg-primary-800/10"
+  ]
+};
+var toggleVariants = classVarianceAuthority.cva(styles3.base, {
+  variants: {
+    variant: {
+      ghost: "",
+      outline: clsx12__default.default(styles3.outline)
+    },
+    size: {
+      default: "h-9 px-2 min-w-9",
+      sm: "h-8 px-1.5 min-w-8",
+      lg: "h-10 px-2.5 min-w-10"
+    }
+  },
+  defaultVariants: {
+    variant: "ghost",
+    size: "default"
+  }
+});
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TogglePrimitive__namespace.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var ToggleGroupContext = React5__namespace.createContext({
+  size: "default",
+  variant: "ghost"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupPrimitive__namespace.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React5__namespace.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupPrimitive__namespace.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-sm last:rounded-r-sm focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function FormatToggle({ format, setFormat }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Format:" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ToggleGroup,
+      {
+        type: "single",
+        value: format,
+        onValueChange: (value) => value && setFormat(value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "oklch", "aria-label": "OKLCH format", children: "OKLCH" })
+        ]
+      }
+    )
+  ] });
+}
+function getPreferredFamilyKey(families) {
+  return families.find((family) => family.key === "green")?.key ?? families[0]?.key ?? "";
+}
+function getDefaultPair(family) {
+  if (!family || family.recommendedPairs.length === 0) return null;
+  return family.recommendedPairs.reduce((bestPair, pair) => {
+    const bestDelta = Math.abs(bestPair.background.tone - 600);
+    const currentDelta = Math.abs(pair.background.tone - 600);
+    return currentDelta < bestDelta ? pair : bestPair;
+  }, family.recommendedPairs[0]);
+}
+function getFamilySwatchColor(family) {
+  return family.colors.find((color2) => color2.tone === 500)?.hex ?? family.colors.find((color2) => color2.tone === 400)?.hex ?? family.colors[Math.min(3, family.colors.length - 1)]?.hex ?? "transparent";
+}
+function ColorPairingToolLoading() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(20rem,0.9fr)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
+    ] })
+  ] });
+}
+function getInitialPairingState(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const familyParam = searchParams.get("family");
+  const pairParam = searchParams.get("pair");
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const families = recommendedAaaPairingCollections[themeCategory];
+  const familyKey = families.some((family) => family.key === familyParam) ? familyParam : getPreferredFamilyKey(families);
+  const activeFamily = families.find((family) => family.key === familyKey) ?? families[0];
+  const defaultPair = getDefaultPair(activeFamily);
+  const selectedPairId = activeFamily?.recommendedPairs.some((pair) => pair.id === pairParam) ? pairParam : defaultPair?.id ?? "";
+  return { familyKey, selectedPairId, themeCategory };
+}
+function PairPreview({ family, pair }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "p-6 sm:min-h-[26rem] sm:p-8",
+      style: {
+        backgroundColor: pair.background.hex,
+        color: pair.foreground.hex
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+              style: {
+                borderColor: pair.foreground.hex,
+                backgroundColor: pair.foreground.hex,
+                color: pair.background.hex
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                family.label
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+              style: {
+                borderColor: pair.foreground.hex
+              },
+              children: [
+                pair.rating,
+                " ",
+                pair.contrastRatio.toFixed(2),
+                ":1"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Tone on tone" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: "Use only AAA-approved tone-on-tone combinations for headings, body copy, and calls to action on colour." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold",
+              style: {
+                backgroundColor: pair.foreground.hex,
+                color: pair.background.hex
+              },
+              children: [
+                "Pass",
+                /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex rounded-full border px-4 py-2 text-sm",
+              style: {
+                borderColor: pair.foreground.hex
+              },
+              children: [
+                pair.background.token,
+                " / ",
+                pair.foreground.token
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+}
+function PairDetailCard({
+  color: color2,
+  format,
+  role
+}) {
+  const [, copyToClipboardRaw] = usehooks.useCopyToClipboard();
+  const [copiedField, setCopiedField] = React5.useState(null);
+  const valueLabel = format.toUpperCase();
+  const formattedValue = getPairingColorValue(color2, format);
+  const copyField = (field) => {
+    const fieldValue = field === "token" ? color2.token : field === "tone" ? String(color2.tone) : formattedValue;
+    copyToClipboardRaw(fieldValue);
+    setCopiedField(field);
+    const toastLabel = field === "token" ? "Token" : field === "tone" ? "Tone" : `${valueLabel} value`;
+    sonner.toast(`${toastLabel} copied to clipboard`, {
+      duration: 2e3
+    });
+    setTimeout(() => setCopiedField(null), 2e3);
+  };
+  const renderCopyButton = (field, srLabel, className) => /* @__PURE__ */ jsxRuntime.jsxs(
+    Button2,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("shrink-0", className),
+      onClick: () => copyField(field),
+      children: [
+        copiedField === field ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: srLabel })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "size-14 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
+          style: { backgroundColor: color2.hex }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: role }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: color2.name ?? color2.token })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Token" }),
+          renderCopyButton("token", `Copy ${role.toLowerCase()} token`)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-base break-all", children: color2.token })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Tone" }),
+          renderCopyButton("tone", `Copy ${role.toLowerCase()} tone`)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: color2.tone })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: valueLabel }),
+          renderCopyButton("value", `Copy ${role.toLowerCase()} ${valueLabel} value`)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-sm break-all", children: formattedValue })
+      ] })
+    ] })
+  ] });
+}
+function ComplianceRow({
+  label,
+  passes,
+  threshold
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 rounded-xl border border-grey-200 px-4 py-3 dark:border-grey-700", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: threshold })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold",
+          passes ? "bg-success-50 text-success-800 dark:bg-success-950/30 dark:text-success-200" : "bg-danger-50 text-danger-800 dark:bg-danger-950/30 dark:text-danger-200"
+        ),
+        children: [
+          passes ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { "data-slot": "icon", className: "size-4" }),
+          passes ? "Pass" : "Fail"
+        ]
+      }
+    )
+  ] });
+}
+function PairComplianceCard({ pair }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "AAA compliance" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Only pairs that pass AAA normal-text contrast are suggested here. Evaluation uses the raw contrast ratio, not the rounded display value." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-grey-200 bg-grey-50 px-4 py-3 dark:border-grey-700 dark:bg-grey-900/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Contrast ratio" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-2xl font-semibold", children: [
+          pair.contrastRatio.toFixed(2),
+          ":1"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ComplianceRow,
+        {
+          label: "AAA normal text",
+          passes: pair.passes.aaaText,
+          threshold: "7.0:1 or higher"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ComplianceRow,
+        {
+          label: "AAA large text",
+          passes: pair.passes.aaaLarge,
+          threshold: "4.5:1 or higher"
+        }
+      )
+    ] })
+  ] });
+}
+function ColorPairingToolContent() {
+  const searchParams = navigation.useSearchParams();
+  const {
+    familyKey: initialFamilyKey,
+    selectedPairId: initialSelectedPairId,
+    themeCategory: initialThemeCategory
+  } = getInitialPairingState(searchParams);
+  const [themeCategory, setThemeCategory] = React5.useState(initialThemeCategory);
+  const [format, setFormat] = React5.useState("hex");
+  const [activeFamilyKey, setActiveFamilyKey] = React5.useState(initialFamilyKey);
+  const [selectedPairId, setSelectedPairId] = React5.useState(initialSelectedPairId);
+  const families = recommendedAaaPairingCollections[themeCategory];
+  const resolvedActiveFamilyKey = families.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(families);
+  const activeFamily = families.find((family) => family.key === resolvedActiveFamilyKey) ?? families[0];
+  const selectedPair = activeFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(activeFamily);
+  const updateUrlParams = (nextThemeCategory, nextFamilyKey, nextSelectedPairId) => {
+    const params = new URLSearchParams(window.location.search);
+    params.set("palette", nextThemeCategory);
+    params.set("family", nextFamilyKey);
+    if (nextSelectedPairId) {
+      params.set("pair", nextSelectedPairId);
+    } else {
+      params.delete("pair");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  };
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    const nextFamilies = recommendedAaaPairingCollections[nextThemeCategory];
+    const nextFamilyKey = nextFamilies.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(nextFamilies);
+    const nextActiveFamily = nextFamilies.find((family) => family.key === nextFamilyKey) ?? nextFamilies[0];
+    const nextSelectedPair = nextActiveFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(nextActiveFamily);
+    setThemeCategory(nextThemeCategory);
+    setActiveFamilyKey(nextFamilyKey);
+    setSelectedPairId(nextSelectedPair?.id ?? "");
+    updateUrlParams(nextThemeCategory, nextFamilyKey, nextSelectedPair?.id ?? "");
+  };
+  const handleFamilyChange = (nextFamilyKey) => {
+    const nextActiveFamily = families.find((family) => family.key === nextFamilyKey);
+    const nextSelectedPair = nextActiveFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(nextActiveFamily);
+    setActiveFamilyKey(nextFamilyKey);
+    setSelectedPairId(nextSelectedPair?.id ?? "");
+    updateUrlParams(themeCategory, nextFamilyKey, nextSelectedPair?.id ?? "");
+  };
+  const handlePairChange = (nextSelectedPairId) => {
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(themeCategory, resolvedActiveFamilyKey, nextSelectedPairId);
+  };
+  if (!activeFamily || !selectedPair) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "No recommended AAA pairs available" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No recommended pairs are available for the current palette." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Palette:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SegmentedControl,
+          {
+            value: themeCategory,
+            onValueChange: (value) => handleThemeCategoryChange(value),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(SegmentedControlList, { className: "w-full sm:w-fit", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlTrigger, { value: "brand", children: "Brand palette" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlTrigger, { value: "aboriginal", children: "Aboriginal palette" })
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormatToggle, { format, setFormat })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-5", children: families.map((family) => {
+      const isActive = family.key === resolvedActiveFamilyKey;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleFamilyChange(family.key),
+          className: cn(
+            "group relative flex w-full items-center gap-3 rounded-sm border px-3 py-2 text-left transition-colors",
+            "border-grey-200 bg-background hover:bg-primary-800/10 hover:text-foreground dark:hover:bg-white/10",
+            isActive && "border-grey-800 dark:border-grey-400"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "size-4 shrink-0 rounded-full",
+                style: { backgroundColor: getFamilySwatchColor(family) }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: family.label })
+          ]
+        },
+        family.key
+      );
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(17rem,0.68fr)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PairPreview, { family: activeFamily, pair: selectedPair }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "Background tone strip" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Filled chips have a recommended AAA foreground pair. Select one to update the preview." })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-2 sm:grid-cols-7 lg:grid-cols-10 xl:grid-cols-[repeat(19,minmax(0,1fr))]", children: activeFamily.colors.map((color2) => {
+                const pair = activeFamily.recommendedPairs.find(
+                  (item) => item.background.token === color2.token
+                );
+                const isSelected = selectedPair.background.token === color2.token;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: !pair,
+                    onClick: () => pair && handlePairChange(pair.id),
+                    className: cn(
+                      "group relative h-12 rounded-xl border transition-transform",
+                      pair ? "cursor-pointer border-grey-200 hover:scale-[1.03] dark:border-grey-700" : "cursor-not-allowed border-grey-100 dark:border-grey-800",
+                      isSelected && "ring-2 ring-primary-500 ring-offset-2 ring-offset-background"
+                    ),
+                    style: { backgroundColor: color2.hex },
+                    children: [
+                      pair && /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
+                          style: { backgroundColor: pair.foreground.hex }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
+                        color2.token,
+                        pair ? ` paired with ${pair.foreground.token}` : " has no recommended pair in this tool"
+                      ] })
+                    ]
+                  },
+                  color2.token
+                );
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  "Selected background:",
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedPair.background.token })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  "Recommended foreground:",
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedPair.foreground.token })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: selectedPair.background, format, role: "Background" }),
+            /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: selectedPair.foreground, format, role: "Foreground" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "h-fit", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "Recommended pairs" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Recommended same-family combinations that meet AAA normal-text contrast." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "grid gap-3", children: activeFamily.recommendedPairs.map((pair) => {
+            const isActive = selectedPair.id === pair.id;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handlePairChange(pair.id),
+                className: cn(
+                  "rounded-2xl border p-4 text-left transition-colors",
+                  isActive ? "border-primary-500 bg-primary-50/70 dark:bg-primary-950/30" : "border-grey-200 hover:border-grey-400 hover:bg-grey-50 dark:border-grey-700 dark:hover:border-grey-500 dark:hover:bg-grey-900/70"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: "size-11 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
+                          style: { backgroundColor: pair.background.hex }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: "size-11 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
+                          style: { backgroundColor: pair.foreground.hex }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-grey-200 px-2.5 py-1 text-xs font-semibold text-muted-foreground dark:border-grey-700", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
+                      pair.rating
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium text-foreground", children: [
+                      pair.background.token,
+                      " / ",
+                      pair.foreground.token
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                      pair.contrastRatio.toFixed(2),
+                      ":1 contrast ratio"
+                    ] })
+                  ] })
+                ]
+              },
+              pair.id
+            );
+          }) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(PairComplianceCard, { pair: selectedPair })
+    ] })
+  ] });
+}
+function ColorPairingTool() {
+  return /* @__PURE__ */ jsxRuntime.jsx(React5.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolContent, {}) });
+}
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -17451,152 +18179,10 @@ function FormMessage({ className, ...props }) {
     }
   );
 }
-var styles3 = {
-  base: [
-    // Base
-    "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium bg-transparent transition-all whitespace-nowrap cursor-pointer border-(--toggle-border) [--toggle-border:var(--color-grey-200)] text-grey-800",
-    // States
-    "data-[state=on]:bg-grey-100 data-[state=on]:text-grey-850",
-    // Hover
-    "hover:bg-grey-100 hover:text-grey-850",
-    // Focus
-    "focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-(--toggle-border)",
-    // Dark mode
-    "dark:text-white",
-    // Dark mode states
-    "dark:data-[state=on]:bg-white/10 dark:data-[state=on]:text-white",
-    // Dark mode hover
-    "dark:hover:bg-white/10 dark:hover:text-white",
-    // Disabled
-    "disabled:pointer-events-none disabled:opacity-50",
-    // Icon
-    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
-    // Aria invalid
-    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
-    // Aria invalid dark mode
-    "dark:aria-invalid:ring-destructive/40"
-  ],
-  outline: [
-    // Base
-    "text-grey-800 border [--toggle-border:var(--color-grey-300)]",
-    // States
-    "hover:[--toggle-border:var(--color-grey-400)]",
-    // Dark mode
-    "dark:[--toggle-border:white]/40",
-    // Dark mode states
-    "dark:hover:[--toggle-border:white]/50",
-    // Data on
-    "data-[state=on]:bg-primary-800/10"
-  ]
-};
-var toggleVariants = classVarianceAuthority.cva(styles3.base, {
-  variants: {
-    variant: {
-      ghost: "",
-      outline: clsx12__default.default(styles3.outline)
-    },
-    size: {
-      default: "h-9 px-2 min-w-9",
-      sm: "h-8 px-1.5 min-w-8",
-      lg: "h-10 px-2.5 min-w-10"
-    }
-  },
-  defaultVariants: {
-    variant: "ghost",
-    size: "default"
-  }
-});
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TogglePrimitive__namespace.Root,
-    {
-      "data-slot": "toggle",
-      className: cn(toggleVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var ToggleGroupContext = React5__namespace.createContext({
-  size: "default",
-  variant: "ghost"
-});
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToggleGroupPrimitive__namespace.Root,
-    {
-      "data-slot": "toggle-group",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
-    }
-  );
-}
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}) {
-  const context = React5__namespace.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToggleGroupPrimitive__namespace.Item,
-    {
-      "data-slot": "toggle-group-item",
-      "data-variant": context.variant || variant,
-      "data-size": context.size || size,
-      className: cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-sm last:rounded-r-sm focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
-function FormatToggle({ format, setFormat }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Format:" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      ToggleGroup,
-      {
-        type: "single",
-        value: format,
-        onValueChange: (value) => value && setFormat(value),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "oklch", "aria-label": "OKLCH format", children: "OKLCH" })
-        ]
-      }
-    )
-  ] });
-}
 
 // package.json
 var package_default = {
-  version: "1.96.0"};
+  version: "1.97.13"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -33838,6 +34424,7 @@ exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent2;
 exports.CollapsibleTrigger = CollapsibleTrigger2;
 exports.ColorCard = ColorCard;
+exports.ColorPairingTool = ColorPairingTool;
 exports.ColorSwatches = ColorSwatches;
 exports.ColourScale = ColourScale;
 exports.ComboChart = ComboChart;