@smicolon/fasla-ui 0.4.1 → 0.4.2

package/dist/index.cjs

@@ -5,8 +5,11 @@ var tailwindMerge = require('tailwind-merge');
 var framerMotion = require('framer-motion');
 
 // src/lib/utils.ts
+var twMerge = tailwindMerge.extendTailwindMerge({
+  extend: { classGroups: { "font-size": [{ text: ["xxs", "link", "list-header"] }] } }
+});
 function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
+  return twMerge(clsx.clsx(inputs));
 }
 
 // src/tokens/model.ts

package/dist/index.js

@@ -1,8 +1,11 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
 import { useReducedMotion } from 'framer-motion';
 
 // src/lib/utils.ts
+var twMerge = extendTailwindMerge({
+  extend: { classGroups: { "font-size": [{ text: ["xxs", "link", "list-header"] }] } }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }

package/dist/lib/utils.cjs

@@ -4,8 +4,11 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 
 // src/lib/utils.ts
+var twMerge = tailwindMerge.extendTailwindMerge({
+  extend: { classGroups: { "font-size": [{ text: ["xxs", "link", "list-header"] }] } }
+});
 function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
+  return twMerge(clsx.clsx(inputs));
 }
 
 exports.cn = cn;

package/dist/lib/utils.js

@@ -1,7 +1,10 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
 
 // src/lib/utils.ts
+var twMerge = extendTailwindMerge({
+  extend: { classGroups: { "font-size": [{ text: ["xxs", "link", "list-header"] }] } }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smicolon/fasla-ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Professional UI components with animations and app building blocks",
   "license": "MIT",
   "author": "Smicolon",

package/registry/ui/avatar/avatar.shadcn-cn.test.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { describe, it, expect, vi } from "vitest"
+import { render } from "@testing-library/react"
+
+// shadcn's cn, which a project set up with `shadcn init` keeps: plain
+// tailwind-merge, which doesn't know Fasla's `text-xxs`.
+vi.mock("../../../src/lib/utils", async () => {
+  const { clsx } = await import("clsx")
+  const { twMerge } = await import("tailwind-merge")
+  return { cn: (...inputs: Parameters<typeof clsx>) => twMerge(clsx(inputs)) }
+})
+
+import { Avatar, avatarVariants } from "./avatar"
+
+const sizes = ["32", "24", "12"] as const
+const radii = ["standard", "rounded"] as const
+
+function frameOf(props: React.ComponentProps<typeof Avatar>) {
+  const { container } = render(<Avatar data-testid="avatar" {...props} />)
+  return container.querySelector("[data-testid='avatar']")!.firstElementChild as HTMLElement
+}
+
+describe("Avatar with shadcn's cn", () => {
+  it.each(sizes)("keeps text-foreground at %s, where the initials and icon take it", (size) => {
+    expect(frameOf({ size, variant: "initials", name: "Layla" })).toHaveClass("text-foreground")
+    expect(frameOf({ size, variant: "icon" })).toHaveClass("text-foreground")
+  })
+
+  // Every class, in order, exactly as the variants give them: nothing merged
+  // away, nothing added, so Avatar looks as it did at every size.
+  it.each(sizes.flatMap((size) => radii.flatMap((radius) => [true, false].map((border) => [size, radius, border] as const))))(
+    "draws %s %s border=%s with the variants' classes and bg-muted, unmerged",
+    (size, radius, border) => {
+      const frame = frameOf({ size, radius, border, variant: "initials", name: "Layla" })
+      expect(frame.className).toBe(`${avatarVariants({ size, radius, border })} bg-muted`)
+    }
+  )
+})

package/registry/ui/avatar/avatar.test.tsx

@@ -31,10 +31,12 @@ describe("Avatar", () => {
       ["24", "size-6", "rounded-[var(--radius-md)]", "text-xs"],
       // Figma's XXS: 10px, leaded 14 in English and 16 in Arabic.
       ["12", "size-3", "rounded-[var(--radius-xs)]", "text-xxs"],
-    ] as const)("Standard %s is %s, %s, %s", (size, box, corner, text) => {
+    ] as const)("Standard %s is %s, %s, %s, in the foreground colour", (size, box, corner, text) => {
       const { root, frame } = avatar({ size, name: "Layla" })
       expect(root).toHaveClass(box)
-      expect(frame).toHaveClass(corner, text)
+      // text-foreground too: merged beside an unknown size, cn dropped it at
+      // 12 and the initials took the colour of whatever held them.
+      expect(frame).toHaveClass(corner, text, "text-foreground")
     })
 
     it.each(["32", "24", "12"] as const)("Rounded %s is a circle", (size) => {

package/registry/ui/avatar/avatar.tsx

@@ -207,11 +207,16 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
         {...props}
       >
         <span
-          className={cn(
+          // Joined, not cn(): every class here is Avatar's own and none
+          // conflicts. A project's cn may not know `text-xxs` — shadcn's
+          // doesn't — and takes it for a colour, dropping `text-foreground`.
+          className={[
             avatarVariants({ size, radius, border }),
             // Figma's Image variants have no fill; the fallback sits on `muted`.
-            !loaded && "bg-muted"
-          )}
+            !loaded && "bg-muted",
+          ]
+            .filter(Boolean)
+            .join(" ")}
         >
           {!loaded &&
             (letters ? (