@smicolon/fasla-ui 0.4.0 → 0.4.2

package/README.md

@@ -129,13 +129,22 @@ export function MyComponent() {
 ## Theme
 
 Components take every colour from your theme. `init` asks which of two layers
-you want; both include the base layer.
+you want and installs it; both include the base layer. The shadcn commands below
+install one too, or switch a project to the other one later.
+
+They need a project that is already set up, with a `components.json`: in a new
+project, run `npx @smicolon/cli init` first, or `npx shadcn@latest init`. Without
+one, the shadcn CLI sets the project up itself, and its preset's colours replace
+Fasla's. On Next.js 14, use `npx @smicolon/cli init`: `shadcn init` writes
+Tailwind 4 styles and loads Geist from `next/font`, which Next.js 14 has neither of.
 
 ```bash
 # Starting from scratch: use Fasla's colours (palette, radius, Geist).
-# On Next.js 14, leave out the font-geist.json URL: next/font there has no Geist.
 npx shadcn@latest add https://ui.smicolon.com/r/theme.json https://ui.smicolon.com/r/font-geist.json
 
+# The same on Next.js 14, without Geist: its template already loads it.
+npx shadcn@latest add https://ui.smicolon.com/r/theme.json
+
 # I have a brand: keep my colours (base layer only)
 npx shadcn@latest add https://ui.smicolon.com/r/theme-base.json
 ```

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.0",
+  "version": "0.4.2",
   "description": "Professional UI components with animations and app building blocks",
   "license": "MIT",
   "author": "Smicolon",

package/registry/effects/effects.test.tsx

@@ -61,6 +61,67 @@ describe("TypewriterText", () => {
     expect(first).not.toHaveBeenCalled()
     expect(latest).toHaveBeenCalledTimes(1)
   })
+
+  it("starts a new text from nothing, never showing the old one", () => {
+    vi.useFakeTimers()
+    const { container, rerender } = render(<TypewriterText text="Hello" speed={10} cursor={false} />)
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(container.textContent).toBe("Hello")
+    rerender(<TypewriterText text="Bye" speed={10} cursor={false} />)
+    expect(container.textContent).toBe("")
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(container.textContent).toBe("Bye")
+  })
+
+  it("types the text again after loopDelay when looping", () => {
+    vi.useFakeTimers()
+    const { container } = render(<TypewriterText text="Hi" speed={10} loop loopDelay={50} cursor={false} />)
+    act(() => {
+      vi.advanceTimersByTime(40)
+    })
+    expect(container.textContent).toBe("Hi")
+    // Done at 20ms; the second pass starts at 70ms and types its next letter at 80.
+    act(() => {
+      vi.advanceTimersByTime(35)
+    })
+    expect(container.textContent).toBe("H")
+  })
+})
+
+describe("Typewriter under reduced motion", () => {
+  const reduceMotion = () =>
+    vi.spyOn(window, "matchMedia").mockImplementation(
+      (query: string) =>
+        ({
+          matches: query.includes("reduce"),
+          media: query,
+          addEventListener: () => {},
+          removeEventListener: () => {},
+        }) as unknown as MediaQueryList
+    )
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it("TypewriterText shows the whole text at once, with no cursor, and reports it complete", () => {
+    reduceMotion()
+    const onComplete = vi.fn()
+    const { container } = render(<TypewriterText text="Your order is on its way." onComplete={onComplete} />)
+    expect(container.textContent).toBe("Your order is on its way.")
+    expect(onComplete).toHaveBeenCalledTimes(1)
+  })
+
+  it("TypewriterWords shows the first word, still", async () => {
+    reduceMotion()
+    const { TypewriterWords } = await import("./typewriter-text/typewriter-text")
+    const { container } = render(<TypewriterWords words={["linen", "wool"]} />)
+    expect(container.textContent).toBe("linen")
+  })
 })
 
 describe("SpotlightCard", () => {

package/registry/effects/glow-card/glow-card.tsx

@@ -3,21 +3,27 @@
 import * as React from "react"
 import { cn } from "../../../src/lib/utils"
 
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)"
+
+function subscribeToReducedMotion(onChange: () => void) {
+  if (typeof window.matchMedia !== "function") return () => {}
+  const query = window.matchMedia(REDUCED_MOTION)
+  query.addEventListener("change", onChange)
+  return () => query.removeEventListener("change", onChange)
+}
+
 /**
- * Whether the user asks for reduced motion. It starts false, so the server and
- * the first client render agree, then follows the setting as it changes.
+ * Whether the user asks for reduced motion. False on the server and while
+ * hydrating, so both renders agree, then the setting as it is and as it
+ * changes. Read through useSyncExternalStore, not set from an effect: an
+ * effect's setState renders everything twice, and React's lint rejects it.
  */
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React.useState(false)
-  React.useEffect(() => {
-    if (typeof window.matchMedia !== "function") return
-    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
-    setReduced(query.matches)
-    const onChange = () => setReduced(query.matches)
-    query.addEventListener("change", onChange)
-    return () => query.removeEventListener("change", onChange)
-  }, [])
-  return reduced
+  return React.useSyncExternalStore(
+    subscribeToReducedMotion,
+    () => typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches,
+    () => false
+  )
 }
 
 /** The value, or the fallback when it is missing or blank (a cleared control, say). */

package/registry/effects/typewriter-text/typewriter-text.tsx

@@ -3,21 +3,27 @@
 import * as React from "react"
 import { cn } from "../../../src/lib/utils"
 
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)"
+
+function subscribeToReducedMotion(onChange: () => void) {
+  if (typeof window.matchMedia !== "function") return () => {}
+  const query = window.matchMedia(REDUCED_MOTION)
+  query.addEventListener("change", onChange)
+  return () => query.removeEventListener("change", onChange)
+}
+
 /**
- * Whether the user asks for reduced motion. It starts false, so the server and
- * the first client render agree, then follows the setting as it changes.
+ * Whether the user asks for reduced motion. False on the server and while
+ * hydrating, so both renders agree, then the setting as it is and as it
+ * changes. Read through useSyncExternalStore, not set from an effect: an
+ * effect's setState renders everything twice, and React's lint rejects it.
  */
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React.useState(false)
-  React.useEffect(() => {
-    if (typeof window.matchMedia !== "function") return
-    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
-    setReduced(query.matches)
-    const onChange = () => setReduced(query.matches)
-    query.addEventListener("change", onChange)
-    return () => query.removeEventListener("change", onChange)
-  }, [])
-  return reduced
+  return React.useSyncExternalStore(
+    subscribeToReducedMotion,
+    () => typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches,
+    () => false
+  )
 }
 
 /** The value, or the fallback when it is missing or blank (a cleared control, say). */
@@ -56,57 +62,57 @@ export function TypewriterText({
   ...props
 }: TypewriterTextProps) {
   const cursorChar = filled(cursorCharProp, "|")
-  const [displayText, setDisplayText] = React.useState("")
-  const [isTyping, setIsTyping] = React.useState(false)
   const prefersReducedMotion = usePrefersReducedMotion()
   const showCursor = cursor && !prefersReducedMotion
 
+  // How far the current run has typed. A new text, speed or timing starts a
+  // new run, and progress left by an older one reads as nothing typed yet, so
+  // the run never has to clear state as it starts.
+  const run = JSON.stringify([text, speed, delay, loop, loopDelay])
+  const [progress, setProgress] = React.useState({ run: "", typed: 0, typing: false })
+  const current = progress.run === run
+  // Reduced motion: the whole text, at once.
+  const displayText = prefersReducedMotion ? text : current ? text.slice(0, progress.typed) : ""
+  const isTyping = current ? progress.typing : true
+
   // Held in a ref: an inline callback is a new function every render, and as
   // an effect dependency it restarted the typing each time the parent rendered.
+  // Updated after each render, never during one.
   const onCompleteRef = React.useRef(onComplete)
-  onCompleteRef.current = onComplete
+  React.useEffect(() => {
+    onCompleteRef.current = onComplete
+  })
 
   React.useEffect(() => {
-    // If user prefers reduced motion, show full text immediately
     if (prefersReducedMotion) {
-      setDisplayText(text)
       onCompleteRef.current?.()
       return
     }
 
     let timeoutId: ReturnType<typeof setTimeout>
-    let charIndex = 0
-    setDisplayText("")
-    setIsTyping(true)
 
     const startTyping = () => {
+      let charIndex = 0
       const typeChar = () => {
         if (charIndex < text.length) {
-          setDisplayText(text.slice(0, charIndex + 1))
           charIndex++
+          setProgress({ run, typed: charIndex, typing: true })
           timeoutId = setTimeout(typeChar, speed)
         } else {
-          setIsTyping(false)
+          setProgress({ run, typed: charIndex, typing: false })
           onCompleteRef.current?.()
-
-          if (loop) {
-            timeoutId = setTimeout(() => {
-              charIndex = 0
-              setDisplayText("")
-              setIsTyping(true)
-              startTyping()
-            }, loopDelay)
-          }
+          if (loop) timeoutId = setTimeout(startTyping, loopDelay)
         }
       }
 
+      setProgress({ run, typed: 0, typing: true })
       typeChar()
     }
 
     timeoutId = setTimeout(startTyping, delay)
 
     return () => clearTimeout(timeoutId)
-  }, [text, speed, delay, loop, loopDelay, prefersReducedMotion])
+  }, [run, text, speed, delay, loop, loopDelay, prefersReducedMotion])
 
   // Cursor blink effect
   const [cursorVisible, setCursorVisible] = React.useState(true)
@@ -163,25 +169,24 @@ export function TypewriterWords({
   ...props
 }: TypewriterWordsProps) {
   const [wordIndex, setWordIndex] = React.useState(0)
-  const [displayText, setDisplayText] = React.useState("")
+  const [typedText, setTypedText] = React.useState("")
   const [isDeleting, setIsDeleting] = React.useState(false)
 
   const prefersReducedMotion = usePrefersReducedMotion()
+  // Reduced motion: the first word, still.
+  const displayText = prefersReducedMotion ? (words[0] ?? "") : typedText
 
   React.useEffect(() => {
-    if (prefersReducedMotion) {
-      setDisplayText(words[0] ?? "")
-      return
-    }
+    if (prefersReducedMotion) return
 
     const currentWord = words[wordIndex] ?? ""
     let timeoutId: ReturnType<typeof setTimeout>
 
     if (!isDeleting) {
       // Typing
-      if (displayText.length < currentWord.length) {
+      if (typedText.length < currentWord.length) {
         timeoutId = setTimeout(() => {
-          setDisplayText(currentWord.slice(0, displayText.length + 1))
+          setTypedText(currentWord.slice(0, typedText.length + 1))
         }, speed)
       } else {
         // Word complete, wait then start deleting
@@ -191,21 +196,21 @@ export function TypewriterWords({
       }
     } else {
       // Deleting
-      if (displayText.length > 0) {
+      if (typedText.length > 0) {
         timeoutId = setTimeout(() => {
-          setDisplayText(displayText.slice(0, -1))
+          setTypedText(typedText.slice(0, -1))
         }, speed / 2)
       } else {
-        // Deletion complete, move to next word
-        setIsDeleting(false)
+        // Deletion complete: after a pause, type the next word.
         timeoutId = setTimeout(() => {
+          setIsDeleting(false)
           setWordIndex((prev) => (prev + 1) % words.length)
         }, wordDelay)
       }
     }
 
     return () => clearTimeout(timeoutId)
-  }, [displayText, isDeleting, wordIndex, words, speed, deleteDelay, wordDelay, prefersReducedMotion])
+  }, [typedText, isDeleting, wordIndex, words, speed, deleteDelay, wordDelay, prefersReducedMotion])
 
   // Cursor blink
   const [cursorVisible, setCursorVisible] = React.useState(true)

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 ? (