@smicolon/fasla-ui 0.3.0 → 0.4.0

package/registry/next14-tsconfig.test.ts

@@ -0,0 +1,43 @@
+// @vitest-environment node
+import { describe, it, expect } from "vitest"
+import { readdirSync } from "node:fs"
+import { join } from "node:path"
+import ts from "typescript"
+
+const registry = __dirname
+
+function sourceFiles(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name)
+    if (entry.isDirectory()) return sourceFiles(path)
+    return /\.tsx?$/.test(entry.name) && !/\.(test|stories)\.tsx?$/.test(entry.name) ? [path] : []
+  })
+}
+
+// The compiler options create-next-app@14 writes. It sets no target, so
+// TypeScript falls back to ES5, and syntax that needs ES2015 or later (a u
+// flag on a regex literal, for one) fails `next build`.
+const next14 = {
+  lib: ["lib.dom.d.ts", "lib.dom.iterable.d.ts", "lib.esnext.d.ts"],
+  allowJs: true,
+  skipLibCheck: true,
+  strict: true,
+  noEmit: true,
+  esModuleInterop: true,
+  module: ts.ModuleKind.ESNext,
+  moduleResolution: ts.ModuleResolutionKind.Bundler,
+  resolveJsonModule: true,
+  isolatedModules: true,
+  jsx: ts.JsxEmit.Preserve,
+}
+
+describe("registry under a Next.js 14 tsconfig", () => {
+  it("type-checks with no target set", () => {
+    const program = ts.createProgram(sourceFiles(registry), next14)
+    const errors = ts.getPreEmitDiagnostics(program).map((d) => {
+      const where = d.file ? `${d.file.fileName.replace(registry, "registry")}:${d.file.getLineAndCharacterOfPosition(d.start ?? 0).line + 1}` : ""
+      return `${where} TS${d.code} ${ts.flattenDiagnosticMessageText(d.messageText, " ")}`
+    })
+    expect(errors).toEqual([])
+  }, 60_000)
+})

package/registry/ui/checkbox/checkbox.test.tsx

@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { Checkbox } from "./checkbox"
+
+describe("Checkbox id", () => {
+  it("uses the id it is given", () => {
+    render(<Checkbox id="terms" label="Accept the terms" />)
+    expect(screen.getByLabelText("Accept the terms").id).toBe("terms")
+  })
+
+  it("generates an id that ties the label to the input", () => {
+    render(<Checkbox label="Accept the terms" />)
+    expect(screen.getByLabelText("Accept the terms").id).not.toBe("")
+  })
+
+  it("keeps working when the id is added and removed between renders", () => {
+    const { rerender } = render(<Checkbox label="Accept the terms" />)
+    rerender(<Checkbox id="terms" label="Accept the terms" />)
+    expect(screen.getByLabelText("Accept the terms").id).toBe("terms")
+    rerender(<Checkbox label="Accept the terms" />)
+    expect(screen.getByLabelText("Accept the terms").id).not.toBe("terms")
+  })
+})

package/registry/ui/checkbox/checkbox.tsx

@@ -26,7 +26,9 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       }
     }, [indeterminate])
 
-    const inputId = id || React.useId()
+    // Called on every render, so the hook order holds when id comes and goes
+    const generatedId = React.useId()
+    const inputId = id || generatedId
 
     const checkbox = (
       <div className="relative flex items-center">

package/registry/ui/combobox/combobox.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest"
+import { describe, it, expect, beforeAll } from "vitest"
 import { render, screen, fireEvent } from "@testing-library/react"
 import { Combobox } from "./combobox"
 
@@ -41,3 +41,32 @@ describe("Combobox text", () => {
     expect(screen.getByText("جارٍ التحميل")).toBeTruthy()
   })
 })
+
+describe("Combobox highlight", () => {
+  // The highlighted option is scrolled into view, which jsdom does not implement
+  beforeAll(() => {
+    Element.prototype.scrollIntoView ??= () => {}
+  })
+
+  it("moves back to the first option when the search changes", () => {
+    const cities = [...options, { value: "dammam", label: "Dammam" }]
+    render(<Combobox options={cities} />)
+    const input = screen.getByRole("combobox")
+
+    fireEvent.focus(input)
+    fireEvent.keyDown(input, { key: "ArrowDown" })
+    fireEvent.keyDown(input, { key: "ArrowDown" })
+    expect(screen.getByRole("option", { name: "Dammam" })).toHaveAttribute("data-highlighted", "true")
+
+    fireEvent.change(input, { target: { value: "a" } })
+    expect(screen.getByRole("option", { name: "Riyadh" })).toHaveAttribute("data-highlighted", "true")
+    expect(screen.getByRole("option", { name: "Dammam" })).toHaveAttribute("data-highlighted", "false")
+  })
+
+  it("quotes the search in the create option", () => {
+    render(<Combobox options={options} creatable onCreate={() => {}} />)
+    const input = screen.getByRole("combobox")
+    fireEvent.change(input, { target: { value: "Mecca" } })
+    expect(screen.getByRole("option").textContent).toBe('Create "Mecca"')
+  })
+})

package/registry/ui/combobox/combobox.tsx

@@ -189,10 +189,13 @@ export function Combobox({
     }
   }, [highlightedIndex, open])
 
-  // Reset highlighted index when search changes
-  React.useEffect(() => {
+  // Reset highlighted index when search changes. Done while rendering rather
+  // than in an effect, so the list never paints with the old highlight.
+  const [highlightedSearch, setHighlightedSearch] = React.useState(search)
+  if (highlightedSearch !== search) {
+    setHighlightedSearch(search)
     setHighlightedIndex(0)
-  }, [search])
+  }
 
   // Close on outside click
   React.useEffect(() => {
@@ -334,7 +337,7 @@ export function Combobox({
                     )}
                   >
                     <PlusIcon size={16} strokeWidth={1.5} className="me-2" />
-                    {createText} "{search}"
+                    {createText} &quot;{search}&quot;
                   </li>
                 )}
               </>

package/registry/ui/input/input.test.tsx

@@ -16,7 +16,7 @@ describe("Input", () => {
     expect(screen.getByTestId("input")).toHaveClass("border-destructive")
 
     rerender(<Input variant="success" data-testid="input" />)
-    expect(screen.getByTestId("input")).toHaveClass("border-green-500")
+    expect(screen.getByTestId("input")).toHaveClass("border-success")
   })
 
   it("renders with different sizes", () => {

package/registry/ui/input/input.tsx

@@ -9,7 +9,7 @@ const inputVariants = cva(
       variant: {
         default: "border-input shadow-sm",
         error: "border-destructive focus-visible:ring-destructive",
-        success: "border-green-500 focus-visible:ring-green-500",
+        success: "border-success focus-visible:ring-success",
       },
       inputSize: {
         default: "h-9 px-3 py-1",

package/registry/ui/skeleton/index.ts

@@ -2,6 +2,7 @@ export {
   Skeleton,
   SkeletonText,
   SkeletonAvatar,
+  SkeletonListItem,
   SkeletonCard,
   type SkeletonProps,
 } from "./skeleton"

package/registry/ui/skeleton/skeleton.test.tsx

@@ -1,6 +1,13 @@
+import * as React from "react"
 import { describe, it, expect } from "vitest"
 import { render, screen } from "@testing-library/react"
-import { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard } from "./skeleton"
+import {
+  Skeleton,
+  SkeletonText,
+  SkeletonAvatar,
+  SkeletonListItem,
+  SkeletonCard,
+} from "./skeleton"
 
 describe("Skeleton", () => {
   it("renders with default props", () => {
@@ -8,19 +15,26 @@ describe("Skeleton", () => {
     expect(screen.getByTestId("skeleton")).toBeInTheDocument()
   })
 
-  it("renders with animation by default", () => {
+  it("uses the secondary token, as Figma does", () => {
     render(<Skeleton data-testid="skeleton" />)
-    expect(screen.getByTestId("skeleton")).toHaveClass("animate-pulse")
+    expect(screen.getByTestId("skeleton")).toHaveClass("bg-secondary")
+  })
+
+  it("pulses by default, only when motion is allowed", () => {
+    render(<Skeleton data-testid="skeleton" />)
+    const skeleton = screen.getByTestId("skeleton")
+    expect(skeleton).toHaveClass("motion-safe:animate-pulse")
+    expect(skeleton).not.toHaveClass("animate-pulse")
   })
 
   it("can disable animation", () => {
     render(<Skeleton animate={false} data-testid="skeleton" />)
-    expect(screen.getByTestId("skeleton")).not.toHaveClass("animate-pulse")
+    expect(screen.getByTestId("skeleton")).not.toHaveClass("motion-safe:animate-pulse")
   })
 
-  it("renders with default variant (rounded-md)", () => {
+  it("renders with default variant (4px radius)", () => {
     render(<Skeleton data-testid="skeleton" />)
-    expect(screen.getByTestId("skeleton")).toHaveClass("rounded-md")
+    expect(screen.getByTestId("skeleton")).toHaveClass("rounded")
   })
 
   it("renders with circular variant", () => {
@@ -37,13 +51,31 @@ describe("Skeleton", () => {
     render(<Skeleton className="h-10 w-20" data-testid="skeleton" />)
     expect(screen.getByTestId("skeleton")).toHaveClass("h-10", "w-20")
   })
+
+  it("lets className override the radius", () => {
+    render(<Skeleton className="rounded-lg" data-testid="skeleton" />)
+    const skeleton = screen.getByTestId("skeleton")
+    expect(skeleton).toHaveClass("rounded-lg")
+    expect(skeleton).not.toHaveClass("rounded")
+  })
+
+  it("is hidden from assistive technology", () => {
+    render(<Skeleton data-testid="skeleton" />)
+    expect(screen.getByTestId("skeleton")).toHaveAttribute("aria-hidden", "true")
+  })
+
+  it("forwards a ref to the element", () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Skeleton ref={ref} data-testid="skeleton" />)
+    expect(ref.current).toBe(screen.getByTestId("skeleton"))
+  })
 })
 
 describe("SkeletonText", () => {
-  it("renders with default 3 lines", () => {
+  it("renders 2 lines by default, as Figma does", () => {
     render(<SkeletonText data-testid="skeleton-text" />)
     const container = screen.getByTestId("skeleton-text")
-    expect(container.children).toHaveLength(3)
+    expect(container.children).toHaveLength(2)
   })
 
   it("renders with specified number of lines", () => {
@@ -52,18 +84,39 @@ describe("SkeletonText", () => {
     expect(container.children).toHaveLength(5)
   })
 
-  it("last line is shorter when multiple lines", () => {
+  it("makes every line a full-width 16px bar", () => {
     render(<SkeletonText lines={3} data-testid="skeleton-text" />)
-    const container = screen.getByTestId("skeleton-text")
-    const lastLine = container.children[2]
-    expect(lastLine).toHaveClass("w-4/5")
+    const lines = Array.from(screen.getByTestId("skeleton-text").children)
+    for (const line of lines) expect(line).toHaveClass("h-4", "w-full")
+  })
+
+  it("stacks lines 8px apart", () => {
+    render(<SkeletonText data-testid="skeleton-text" />)
+    expect(screen.getByTestId("skeleton-text")).toHaveClass("flex", "flex-col", "gap-2")
   })
 
-  it("single line is full width", () => {
-    render(<SkeletonText lines={1} data-testid="skeleton-text" />)
+  it("passes animate to every line", () => {
+    render(<SkeletonText animate={false} data-testid="skeleton-text" />)
+    const lines = Array.from(screen.getByTestId("skeleton-text").children)
+    for (const line of lines) expect(line).not.toHaveClass("motion-safe:animate-pulse")
+  })
+
+  it("keeps animate and variant off the DOM", () => {
+    render(<SkeletonText animate variant="circular" data-testid="skeleton-text" />)
     const container = screen.getByTestId("skeleton-text")
-    const line = container.children[0]
-    expect(line).toHaveClass("w-full")
+    expect(container).not.toHaveAttribute("animate")
+    expect(container).not.toHaveAttribute("variant")
+  })
+
+  it("keeps variant off the DOM in the list item and card too", () => {
+    render(
+      <>
+        <SkeletonListItem variant="circular" data-testid="list-item" />
+        <SkeletonCard variant="circular" data-testid="card" />
+      </>
+    )
+    expect(screen.getByTestId("list-item")).not.toHaveAttribute("variant")
+    expect(screen.getByTestId("card")).not.toHaveAttribute("variant")
   })
 })
 
@@ -73,32 +126,63 @@ describe("SkeletonAvatar", () => {
     expect(screen.getByTestId("skeleton-avatar")).toHaveClass("rounded-full")
   })
 
-  it("renders with default size", () => {
+  it("renders at 48px by default", () => {
     render(<SkeletonAvatar data-testid="skeleton-avatar" />)
-    expect(screen.getByTestId("skeleton-avatar")).toHaveClass("h-10", "w-10")
+    expect(screen.getByTestId("skeleton-avatar")).toHaveClass("h-12", "w-12")
   })
 
   it("accepts custom className to override size", () => {
     render(<SkeletonAvatar className="h-16 w-16" data-testid="skeleton-avatar" />)
-    expect(screen.getByTestId("skeleton-avatar")).toHaveClass("h-16", "w-16")
+    const avatar = screen.getByTestId("skeleton-avatar")
+    expect(avatar).toHaveClass("h-16", "w-16")
+    expect(avatar).not.toHaveClass("h-12", "w-12")
+  })
+})
+
+describe("SkeletonListItem", () => {
+  it("puts the avatar first, then the lines, 16px apart", () => {
+    render(<SkeletonListItem data-testid="skeleton-list-item" />)
+    const row = screen.getByTestId("skeleton-list-item")
+    expect(row).toHaveClass("flex", "items-center", "gap-4")
+    expect(row.children[0]).toHaveClass("rounded-full", "h-12", "w-12")
+    expect(row.children[1]!.children).toHaveLength(2)
+  })
+
+  it("accepts lines", () => {
+    render(<SkeletonListItem lines={3} data-testid="skeleton-list-item" />)
+    expect(screen.getByTestId("skeleton-list-item").children[1]!.children).toHaveLength(3)
+  })
+
+  it("passes animate to every block", () => {
+    const { container } = render(<SkeletonListItem animate={false} />)
+    expect(container.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(3)
+    expect(container.querySelectorAll(".motion-safe\\:animate-pulse")).toHaveLength(0)
+  })
+
+  it("is hidden from assistive technology", () => {
+    render(<SkeletonListItem data-testid="skeleton-list-item" />)
+    expect(screen.getByTestId("skeleton-list-item")).toHaveAttribute("aria-hidden", "true")
   })
 })
 
 describe("SkeletonCard", () => {
-  it("renders a card container", () => {
+  it("has no card surface of its own", () => {
     render(<SkeletonCard data-testid="skeleton-card" />)
-    expect(screen.getByTestId("skeleton-card")).toHaveClass("rounded-xl", "border", "bg-card", "shadow")
+    const card = screen.getByTestId("skeleton-card")
+    expect(card).toHaveClass("flex", "flex-col", "gap-4")
+    expect(card).not.toHaveClass("border", "bg-card", "shadow")
   })
 
-  it("contains an avatar skeleton", () => {
-    const { container } = render(<SkeletonCard />)
-    const avatars = container.querySelectorAll(".rounded-full")
-    expect(avatars.length).toBeGreaterThan(0)
+  it("puts a 122px media block above 2 lines", () => {
+    render(<SkeletonCard data-testid="skeleton-card" />)
+    const card = screen.getByTestId("skeleton-card")
+    expect(card.children[0]).toHaveClass("h-[122px]", "w-full", "rounded")
+    expect(card.children[1]!.children).toHaveLength(2)
   })
 
-  it("contains text skeletons", () => {
-    const { container } = render(<SkeletonCard />)
-    const skeletons = container.querySelectorAll(".animate-pulse")
-    expect(skeletons.length).toBeGreaterThan(0)
+  it("passes animate to every block", () => {
+    const { container } = render(<SkeletonCard animate={false} />)
+    expect(container.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(3)
+    expect(container.querySelectorAll(".motion-safe\\:animate-pulse")).toHaveLength(0)
   })
 })

package/registry/ui/skeleton/skeleton.tsx

@@ -1,6 +1,26 @@
 import * as React from "react"
 import { cn } from "../../../src/lib/utils"
 
+/**
+ * Skeleton — a loading placeholder that stands in for content until it arrives.
+ *
+ * Matches the Figma set (Skeleton, `15120:8056`):
+ * - every block is `secondary`, the token Figma binds (`theme/secondary`),
+ *   solid rather than a tint, so it reads the same on any surface;
+ * - bars are 16px tall with a 4px radius, stacked 8px apart;
+ * - the list item puts a 48px circle 16px before its lines;
+ * - the card puts a 122px media block 16px above its lines.
+ *
+ * Blocks are decorative, so each is `aria-hidden`. Announce loading on the
+ * region that is loading instead, with `aria-busy="true"`.
+ *
+ * The pulse is Tailwind's built-in `animate-pulse`, behind `motion-safe:`, so
+ * it stops when the user has asked for reduced motion.
+ *
+ * Every composition lays out with flex and logical order only, so in RTL the
+ * circle moves to the inline start (the right) with no `rtl:` overrides.
+ */
+
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   /** The shape of the skeleton */
   variant?: "default" | "circular" | "rectangular"
@@ -8,18 +28,20 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   animate?: boolean
 }
 
-function Skeleton({
-  className,
-  variant = "default",
-  animate = true,
-  ...props
-}: SkeletonProps) {
-  return (
+/**
+ * A single block. A drop-in replacement for shadcn's Skeleton: size it with
+ * `className`, such as `h-4 w-48`.
+ */
+const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, variant = "default", animate = true, ...props }, ref) => (
     <div
+      ref={ref}
+      data-slot="skeleton"
+      aria-hidden="true"
       className={cn(
-        "bg-primary/10",
-        animate && "animate-pulse",
-        variant === "default" && "rounded-md",
+        "bg-secondary",
+        animate && "motion-safe:animate-pulse",
+        variant === "default" && "rounded",
         variant === "circular" && "rounded-full",
         variant === "rectangular" && "rounded-none",
         className
@@ -27,62 +49,100 @@ function Skeleton({
       {...props}
     />
   )
+)
+Skeleton.displayName = "Skeleton"
+
+/** Props for the compositions: `animate` reaches every block inside. */
+type SkeletonGroupProps = SkeletonProps & {
+  /** Number of text lines */
+  lines?: number
+}
+
+/**
+ * A group has no shape of its own, so `variant` is taken out of its props and
+ * never reaches the DOM. The parameter's rest pattern makes the copy.
+ */
+function withoutVariant({ ...props }: SkeletonProps): React.HTMLAttributes<HTMLDivElement> {
+  delete props.variant
+  return props
 }
 
-/** Pre-built skeleton for text lines */
+/** Pre-built skeleton for text lines. Every line is full width, as in Figma. */
 function SkeletonText({
   className,
-  lines = 3,
+  lines = 2,
+  animate = true,
   ...props
-}: SkeletonProps & { lines?: number }) {
+}: SkeletonGroupProps) {
   return (
-    <div className={cn("space-y-2", className)} {...props}>
+    <div
+      data-slot="skeleton-text"
+      aria-hidden="true"
+      className={cn("flex flex-col gap-2", className)}
+      {...withoutVariant(props)}
+    >
       {Array.from({ length: lines }).map((_, i) => (
-        <Skeleton
-          key={i}
-          className={cn(
-            "h-4",
-            i === lines - 1 && lines > 1 ? "w-4/5" : "w-full"
-          )}
-        />
+        <Skeleton key={i} animate={animate} className="h-4 w-full" />
       ))}
     </div>
   )
 }
 
-/** Pre-built skeleton for avatars */
+/** Pre-built skeleton for avatars: a 48px circle. */
 function SkeletonAvatar({ className, ...props }: SkeletonProps) {
   return (
     <Skeleton
       variant="circular"
-      className={cn("h-10 w-10", className)}
+      className={cn("h-12 w-12 shrink-0", className)}
       {...props}
     />
   )
 }
 
-/** Pre-built skeleton for cards */
-function SkeletonCard({ className, ...props }: SkeletonProps) {
+/**
+ * Pre-built skeleton for a list row: an avatar at the inline start, then text
+ * lines filling the rest. For lists, comments and profile rows.
+ */
+function SkeletonListItem({
+  className,
+  lines = 2,
+  animate = true,
+  ...props
+}: SkeletonGroupProps) {
+  return (
+    <div
+      data-slot="skeleton-list-item"
+      aria-hidden="true"
+      className={cn("flex items-center gap-4", className)}
+      {...withoutVariant(props)}
+    >
+      <SkeletonAvatar animate={animate} />
+      <SkeletonText lines={lines} animate={animate} className="min-w-0 flex-1" />
+    </div>
+  )
+}
+
+/**
+ * Pre-built skeleton for cards: a media block above text lines. It has no
+ * border or background of its own, so it can sit inside a real Card.
+ */
+function SkeletonCard({
+  className,
+  lines = 2,
+  animate = true,
+  ...props
+}: SkeletonGroupProps) {
   return (
     <div
-      className={cn(
-        "rounded-xl border bg-card p-6 shadow",
-        className
-      )}
-      {...props}
+      data-slot="skeleton-card"
+      aria-hidden="true"
+      className={cn("flex flex-col gap-4", className)}
+      {...withoutVariant(props)}
     >
-      <div className="flex items-center gap-4">
-        <SkeletonAvatar />
-        <div className="space-y-2 flex-1">
-          <Skeleton className="h-4 w-1/2" />
-          <Skeleton className="h-3 w-1/4" />
-        </div>
-      </div>
-      <div className="mt-4">
-        <SkeletonText lines={3} />
-      </div>
+      <Skeleton animate={animate} className="h-[122px] w-full" />
+      <SkeletonText lines={lines} animate={animate} />
     </div>
   )
 }
 
-export { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard }
+export { Skeleton, SkeletonText, SkeletonAvatar, SkeletonListItem, SkeletonCard }

package/registry.json

@@ -421,7 +421,7 @@
       "name": "skeleton",
       "type": "registry:ui",
       "title": "Skeleton",
-      "description": "Loading skeleton placeholders with pre-built variants for text, avatars, and cards.",
+      "description": "Loading placeholders that replace shadcn's Skeleton: a plain block plus text, avatar, list item and card shapes that stay still under reduced motion.",
       "dependencies": [],
       "registryDependencies": [],
       "files": [