1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T137f,import { clsx, type ClassValue } from "clsx"; import { extendTailwindMerge } from "tailwind-merge"; /** * Woohl's class merger. * * `clsx` resolves conditionals; `tailwind-merge` resolves conflicts, so a * consumer's `className` always beats the component's default rather than * landing in an undefined-order tie. * * The merger is EXTENDED, not the stock one, and that is not optional polish. * tailwind-merge only knows a class conflicts with another if it can put both * in the same group — and it has never heard of `rounded-pill`, `text-h2`, * `shadow-e2`, `motion-fast` or `z-modal`. Left unextended, `cn("rounded-lg", * "rounded-pill")` keeps BOTH, and which one wins is decided by stylesheet * order rather than by the call. That is exactly the bug this helper exists to * prevent, and it is invisible until a consumer's override silently does * nothing. * * Two mechanisms are in play below: * * `theme` tells tailwind-merge which custom VALUES exist in a scale it * already understands. `radius: ["pill"]` is what makes * `rounded-pill` a border-radius class. * * `classGroups` declares whole utilities Tailwind doesn't have — the ones * the token layer adds with `@utility`. */ const twMerge = extendTailwindMerge<"woohl-motion" | "woohl-eyebrow" | "woohl-shell" | "woohl-measure">({ extend: { /** * Custom values inside Tailwind's own scales. Keep in step with tokens/ — * a value missing here still renders, it just stops merging correctly, and * worse, gets misclassified: without `text` below, `text-h2` is read as a * COLOUR (the `text-` colour group's fallback matches anything), so * `cn("text-h2", "text-text-primary")` would quietly delete the size. */ theme: { radius: ["pill"], shadow: ["hairline", "e1", "e2", "e3", "focus"], /* The `--container-*` namespace, which is what `max-w-*` reads. */ container: ["woohl", "prose"], font: ["ui", "editorial", "serif", "mono", "display", "script"], ease: ["out-woohl", "in-out-woohl", "spring"], text: [ // Product scale "display", "h1", "h2", "h3", "body-lg", "body", "label", "caption", "eyebrow", // Editorial scale "editorial-display", "editorial-headline", "editorial-title", "editorial-lead", "editorial-body", "editorial-eyebrow", "editorial-numeral", "editorial-quote", ], }, classGroups: { /* tokens/motion.css — a duration and its easing, together. */ "woohl-motion": [ "motion-instant", "motion-fast", "motion-base", "motion-slow", "motion-deliberate", ], /* tokens/motion.css — the keyframe utilities. Placed in Tailwind's own `animate` group so `animate-none` still clears them. */ animate: [ "animate-woohl-fade", "animate-woohl-rise", "animate-woohl-scale-in", "animate-woohl-shimmer", "animate-woohl-spin", ], /* tokens/z-index.css — named layers, in Tailwind's `z` group so they conflict correctly with `z-10` and `z-auto`. */ z: [ "z-raised", "z-sticky", "z-dropdown", "z-overlay", "z-modal", "z-popover", "z-toast", "z-tooltip", ], /* tokens/typography.css — the eyebrow sets size, tracking, weight and case in one class, so it genuinely fights a font-size utility. */ "woohl-eyebrow": ["eyebrow", "eyebrow-editorial"], /* tokens/breakpoints.css — the page shell. */ "woohl-shell": ["woohl-container"], /* tokens/typography.css — the body measure. */ "woohl-measure": ["measure"], /* themes/buyer.css — the storefront's tinted section band. Lives in Tailwind's background-colour group so it and `bg-*` resolve together. */ "bg-color": ["surface-warm"], }, conflictingClassGroups: { /* Both directions: whichever the caller wrote last should win, and an eyebrow next to a font-size is always one of them being ignored. */ "woohl-eyebrow": ["font-size", "tracking"], "font-size": ["woohl-eyebrow"], /* `measure` is a max-width. */ "woohl-measure": ["max-w"], "max-w": ["woohl-measure"], }, }, }); /** * `accent-line` is deliberately NOT in a conflict group. * * It sets family, style, weight and colour — the italic Playfair line two of a * Woohl headline — and it is designed to compose with a size: * `cn("text-h1", "accent-line")` is the actual two-line device. Grouping it * with font-size or text-colour would make the system delete the thing it is * supposed to build. */ export type { ClassValue }; export function cn(...inputs: ClassValue[]): string { return twMerge(clsx(inputs)); } 24:T6502,

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/**
 * Woohl's class merger.
 *
 * `clsx` resolves conditionals; `tailwind-merge` resolves conflicts, so a
 * consumer's `className` always beats the component's default rather than
 * landing in an undefined-order tie.
 *
 * The merger is EXTENDED, not the stock one, and that is not optional polish.
 * tailwind-merge only knows a class conflicts with another if it can put both
 * in the same group — and it has never heard of `rounded-pill`, `text-h2`,
 * `shadow-e2`, `motion-fast` or `z-modal`. Left unextended, `cn("rounded-lg",
 * "rounded-pill")` keeps BOTH, and which one wins is decided by stylesheet
 * order rather than by the call. That is exactly the bug this helper exists to
 * prevent, and it is invisible until a consumer's override silently does
 * nothing.
 *
 * Two mechanisms are in play below:
 *
 *   `theme`        tells tailwind-merge which custom VALUES exist in a scale it
 *                  already understands. `radius: ["pill"]` is what makes
 *                  `rounded-pill` a border-radius class.
 *
 *   `classGroups`  declares whole utilities Tailwind doesn't have — the ones
 *                  the token layer adds with `@utility`.
 */
const twMerge = extendTailwindMerge<"woohl-motion" | "woohl-eyebrow" | "woohl-shell" | "woohl-measure">({
  extend: {
    /**
     * Custom values inside Tailwind's own scales. Keep in step with tokens/ —
     * a value missing here still renders, it just stops merging correctly, and
     * worse, gets misclassified: without `text` below, `text-h2` is read as a
     * COLOUR (the `text-` colour group's fallback matches anything), so
     * `cn("text-h2", "text-text-primary")` would quietly delete the size.
     */
    theme: {
      radius: ["pill"],
      shadow: ["hairline", "e1", "e2", "e3", "focus"],
      /* The `--container-*` namespace, which is what `max-w-*` reads. */
      container: ["woohl", "prose"],
      font: ["ui", "editorial", "serif", "mono", "display", "script"],
      ease: ["out-woohl", "in-out-woohl", "spring"],
      text: [
        // Product scale
        "display",
        "h1",
        "h2",
        "h3",
        "body-lg",
        "body",
        "label",
        "caption",
        "eyebrow",
        // Editorial scale
        "editorial-display",
        "editorial-headline",
        "editorial-title",
        "editorial-lead",
        "editorial-body",
        "editorial-eyebrow",
        "editorial-numeral",
        "editorial-quote",
      ],
    },

    classGroups: {
      /* tokens/motion.css — a duration and its easing, together. */
      "woohl-motion": [
        "motion-instant",
        "motion-fast",
        "motion-base",
        "motion-slow",
        "motion-deliberate",
      ],
      /* tokens/motion.css — the keyframe utilities. Placed in Tailwind's own
         `animate` group so `animate-none` still clears them. */
      animate: [
        "animate-woohl-fade",
        "animate-woohl-rise",
        "animate-woohl-scale-in",
        "animate-woohl-shimmer",
        "animate-woohl-spin",
      ],
      /* tokens/z-index.css — named layers, in Tailwind's `z` group so they
         conflict correctly with `z-10` and `z-auto`. */
      z: [
        "z-raised",
        "z-sticky",
        "z-dropdown",
        "z-overlay",
        "z-modal",
        "z-popover",
        "z-toast",
        "z-tooltip",
      ],
      /* tokens/typography.css — the eyebrow sets size, tracking, weight and
         case in one class, so it genuinely fights a font-size utility. */
      "woohl-eyebrow": ["eyebrow", "eyebrow-editorial"],
      /* tokens/breakpoints.css — the page shell. */
      "woohl-shell": ["woohl-container"],
      /* tokens/typography.css — the body measure. */
      "woohl-measure": ["measure"],
      /* themes/buyer.css — the storefront's tinted section band. Lives in
         Tailwind's background-colour group so it and `bg-*` resolve together. */
      "bg-color": ["surface-warm"],
    },

    conflictingClassGroups: {
      /* Both directions: whichever the caller wrote last should win, and an
         eyebrow next to a font-size is always one of them being ignored. */
      "woohl-eyebrow": ["font-size", "tracking"],
      "font-size": ["woohl-eyebrow"],

      /* `measure` is a max-width. */
      "woohl-measure": ["max-w"],
      "max-w": ["woohl-measure"],
    },
  },
});

/**
 * `accent-line` is deliberately NOT in a conflict group.
 *
 * It sets family, style, weight and colour — the italic Playfair line two of a
 * Woohl headline — and it is designed to compose with a size:
 * `cn("text-h1", "accent-line")` is the actual two-line device. Grouping it
 * with font-size or text-colour would make the system delete the thing it is
 * supposed to build.
 */

export type { ClassValue };

export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs));
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Primitives"}],["$","$L1e",null,{"children":"cn()"}],["$","$L1f",null,{"children":"The class merger, configured for Woohl's custom utilities."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"utils"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/utils","source":"$23","highlighted":"$24","npm":["clsx","tailwind-merge"],"registry":["@woohl/tokens"],"props":"$undefined"}]}]]}]]}]