fix: cn keeps text-title and text-body next to a text color

.github/workflows/ci.yml

@@ -14,6 +14,8 @@ jobs:
       - run: bun install --frozen-lockfile
       - run: bun run theme:check
       - run: bun run tokens:check
+      - name: cn keeps the type scale next to a text color
+        run: bun -e 'import { cn } from "./registry/winlab/lib/utils"; const out = cn("text-body text-title", "text-foreground"); if (out !== "text-title text-foreground") throw new Error(out)'
       - run: bun run lint
       - run: bun run typecheck
       - run: bun run format:check
@@ -98,6 +100,8 @@ jobs:
           grep -q 'layout === "wide"' components/app-shell.tsx
           bunx shadcn@latest add http://localhost:8099/r/confirm-dialog.json -y -o
           grep -q 'useTransition' components/confirm-dialog.tsx
+          grep -q 'createCn' lib/utils.ts
+          grep -q 'from "@/lib/utils"' components/ui/button.tsx
           bunx shadcn@latest add http://localhost:8099/r/form-dialog.json -y -o
           grep -q 'fieldset' components/form-dialog.tsx
           bunx shadcn@latest add http://localhost:8099/r/empty-state.json -y -o

lib/utils.ts

@@ -1 +1,2 @@
-export { cn } from "cn"
+// next/font and other generated code import cn from "@/lib/utils".
+export { cn } from "@/registry/winlab/lib/utils"

registry.json

@@ -187,7 +187,7 @@
       "name": "utils",
       "type": "registry:lib",
       "title": "Utils",
-      "description": "cn re-exported at @/lib/utils.",
+      "description": "cn at @/lib/utils, aware of the text-title / text-body sizes.",
       "dependencies": [
         "cn"
       ],
@@ -225,6 +225,9 @@
           "path": "registry/winlab/ui/button.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -240,6 +243,9 @@
           "path": "registry/winlab/ui/label.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -256,6 +262,9 @@
           "path": "registry/winlab/ui/input.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -271,6 +280,9 @@
           "path": "registry/winlab/ui/textarea.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -286,6 +298,9 @@
           "path": "registry/winlab/ui/skeleton.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -303,6 +318,9 @@
           "path": "registry/winlab/ui/badge.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -317,6 +335,7 @@
         "lucide-react"
       ],
       "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json",
         "https://ui.winlab.tw/r/button.json"
       ],
       "files": [
@@ -336,6 +355,7 @@
         "cn"
       ],
       "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json",
         "https://ui.winlab.tw/r/button.json"
       ],
       "files": [
@@ -362,6 +382,7 @@
         }
       ],
       "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json",
         "https://ui.winlab.tw/r/field.json"
       ]
     },
@@ -378,6 +399,9 @@
           "path": "registry/winlab/ui/table.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -394,6 +418,9 @@
           "path": "registry/winlab/ui/popover.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -411,6 +438,9 @@
           "path": "registry/winlab/ui/command.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -428,6 +458,9 @@
           "path": "registry/winlab/ui/dropdown-menu.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -445,6 +478,9 @@
           "path": "registry/winlab/ui/checkbox.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -461,6 +497,9 @@
           "path": "registry/winlab/ui/switch.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -477,6 +516,9 @@
           "path": "registry/winlab/ui/tabs.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -493,6 +535,9 @@
           "path": "registry/winlab/ui/avatar.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -509,6 +554,9 @@
           "path": "registry/winlab/ui/tooltip.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -525,6 +573,9 @@
           "path": "registry/winlab/ui/separator.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -541,6 +592,9 @@
           "path": "registry/winlab/ui/collapsible.tsx",
           "type": "registry:ui"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     },
     {
@@ -569,6 +623,7 @@
         "lucide-react"
       ],
       "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json",
         "https://ui.winlab.tw/r/field.json",
         "https://ui.winlab.tw/r/popover.json",
         "https://ui.winlab.tw/r/command.json"
@@ -591,6 +646,7 @@
         "react-day-picker"
       ],
       "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json",
         "https://ui.winlab.tw/r/button.json"
       ],
       "files": [
@@ -609,6 +665,7 @@
         "cn"
       ],
       "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json",
         "https://ui.winlab.tw/r/avatar.json",
         "https://ui.winlab.tw/r/tooltip.json"
       ],
@@ -756,6 +813,7 @@
         "react-day-picker"
       ],
       "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json",
         "https://ui.winlab.tw/r/field.json",
         "https://ui.winlab.tw/r/calendar.json",
         "https://ui.winlab.tw/r/popover.json"
@@ -780,6 +838,9 @@
           "path": "registry/winlab/blocks/action-panel/action-panel.tsx",
           "type": "registry:component"
         }
+      ],
+      "registryDependencies": [
+        "https://ui.winlab.tw/r/utils.json"
       ]
     }
   ]

registry/winlab/blocks/action-panel/action-panel.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 
 type ActionPanelProps = {
   /** The verb: "開門". */

registry/winlab/blocks/app-shell/app-shell.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 
 import {
   Avatar,

registry/winlab/blocks/date-picker/date-picker.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 import { CalendarIcon } from "lucide-react"
 import type { Matcher } from "react-day-picker"
 

registry/winlab/lib/utils.ts

@@ -1,3 +1,8 @@
-// next/font and other generated code import cn from "@/lib/utils"; WinLab
-// components import it from the cn package directly.
-export { cn } from "cn"
+import { createCn } from "cn/config"
+
+// cn that knows the WinLab type scale. Stock tailwind-merge rules read
+// text-title and text-body as colors, so cn("text-body", "text-foreground")
+// would drop the size; registering them as font sizes keeps both.
+export const cn = createCn({
+  extend: { classGroups: { "font-size": [{ text: ["title", "body"] }] } },
+})

registry/winlab/ui/alert-dialog.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 
 import { Button } from "@/registry/winlab/ui/button"
 

registry/winlab/ui/avatar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 
 // One size, 40px: the height of a control row.
 function Avatar({ className, ...props }: AvatarPrimitive.Root.Props) {

registry/winlab/ui/badge.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 
 // Status variants share one shape: a tinted background with text in the same color.
 const badgeVariants = cva(

registry/winlab/ui/button.tsx

@@ -1,6 +1,6 @@
 import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 
 // One height for text and icon buttons; variants follow what WinLab apps use.
 const buttonVariants = cva(

registry/winlab/ui/calendar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 import { DayPicker, type DayButton } from "react-day-picker"
 import { zhTW } from "react-day-picker/locale"

registry/winlab/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 import { CheckIcon } from "lucide-react"
 
 // Round, 20px, with a larger invisible hit area. A future radio shows a dot,

registry/winlab/ui/collapsible.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 
 function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
   return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />

registry/winlab/ui/combobox.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 import { ChevronDownIcon } from "lucide-react"
 
 import { fieldTriggerClassName } from "@/registry/winlab/lib/field"

registry/winlab/ui/command.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 import { CheckIcon, SearchIcon } from "lucide-react"
 
 // Searchable list for a popover (combobox). It has no surface of its own:

registry/winlab/ui/dialog.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
 import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
+import { cn } from "@/registry/winlab/lib/utils"
 import { XIcon } from "lucide-react"
 
 import { Button } from "@/registry/winlab/ui/button"