@smicolon/fasla-ui 0.2.2

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

@@ -0,0 +1,220 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface TypewriterTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Text to type out */
+  text: string
+  /** Typing speed in milliseconds per character */
+  speed?: number
+  /** Delay before starting */
+  delay?: number
+  /** Whether to show cursor */
+  cursor?: boolean
+  /** Cursor character */
+  cursorChar?: string
+  /** Whether to loop the animation */
+  loop?: boolean
+  /** Delay before restarting when looping */
+  loopDelay?: number
+  /** Called when typing is complete */
+  onComplete?: () => void
+}
+
+export function TypewriterText({
+  text,
+  speed = 50,
+  delay = 0,
+  cursor = true,
+  cursorChar = "|",
+  loop = false,
+  loopDelay = 2000,
+  onComplete,
+  className,
+  ...props
+}: TypewriterTextProps) {
+  const [displayText, setDisplayText] = React.useState("")
+  const [isTyping, setIsTyping] = React.useState(false)
+  const [showCursor, setShowCursor] = React.useState(cursor)
+
+  // Check for reduced motion preference
+  const prefersReducedMotion = React.useMemo(() => {
+    if (typeof window === "undefined") return false
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  }, [])
+
+  React.useEffect(() => {
+    // If user prefers reduced motion, show full text immediately
+    if (prefersReducedMotion) {
+      setDisplayText(text)
+      setShowCursor(false)
+      onComplete?.()
+      return
+    }
+
+    let timeoutId: NodeJS.Timeout
+    let charIndex = 0
+    setIsTyping(true)
+
+    const startTyping = () => {
+      const typeChar = () => {
+        if (charIndex < text.length) {
+          setDisplayText(text.slice(0, charIndex + 1))
+          charIndex++
+          timeoutId = setTimeout(typeChar, speed)
+        } else {
+          setIsTyping(false)
+          onComplete?.()
+
+          if (loop) {
+            timeoutId = setTimeout(() => {
+              charIndex = 0
+              setDisplayText("")
+              setIsTyping(true)
+              startTyping()
+            }, loopDelay)
+          }
+        }
+      }
+
+      typeChar()
+    }
+
+    timeoutId = setTimeout(startTyping, delay)
+
+    return () => clearTimeout(timeoutId)
+  }, [text, speed, delay, loop, loopDelay, onComplete, prefersReducedMotion])
+
+  // Cursor blink effect
+  const [cursorVisible, setCursorVisible] = React.useState(true)
+
+  React.useEffect(() => {
+    if (!showCursor || prefersReducedMotion) return
+
+    const blinkInterval = setInterval(() => {
+      setCursorVisible((prev) => !prev)
+    }, 530)
+
+    return () => clearInterval(blinkInterval)
+  }, [showCursor, prefersReducedMotion])
+
+  return (
+    <span className={cn("inline", className)} {...props}>
+      {displayText}
+      {showCursor && (
+        <span
+          className={cn(
+            "ml-0.5 inline-block",
+            cursorVisible ? "opacity-100" : "opacity-0",
+            isTyping ? "" : "animate-pulse"
+          )}
+          aria-hidden="true"
+        >
+          {cursorChar}
+        </span>
+      )}
+    </span>
+  )
+}
+
+export interface TypewriterWordsProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Array of words to cycle through */
+  words: string[]
+  /** Typing speed */
+  speed?: number
+  /** Delay before deleting */
+  deleteDelay?: number
+  /** Delay between words */
+  wordDelay?: number
+  /** Whether to show cursor */
+  cursor?: boolean
+}
+
+export function TypewriterWords({
+  words,
+  speed = 80,
+  deleteDelay = 1500,
+  wordDelay = 500,
+  cursor = true,
+  className,
+  ...props
+}: TypewriterWordsProps) {
+  const [wordIndex, setWordIndex] = React.useState(0)
+  const [displayText, setDisplayText] = React.useState("")
+  const [isDeleting, setIsDeleting] = React.useState(false)
+
+  const prefersReducedMotion = React.useMemo(() => {
+    if (typeof window === "undefined") return false
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  }, [])
+
+  React.useEffect(() => {
+    if (prefersReducedMotion) {
+      setDisplayText(words[0] ?? "")
+      return
+    }
+
+    const currentWord = words[wordIndex] ?? ""
+    let timeoutId: NodeJS.Timeout
+
+    if (!isDeleting) {
+      // Typing
+      if (displayText.length < currentWord.length) {
+        timeoutId = setTimeout(() => {
+          setDisplayText(currentWord.slice(0, displayText.length + 1))
+        }, speed)
+      } else {
+        // Word complete, wait then start deleting
+        timeoutId = setTimeout(() => {
+          setIsDeleting(true)
+        }, deleteDelay)
+      }
+    } else {
+      // Deleting
+      if (displayText.length > 0) {
+        timeoutId = setTimeout(() => {
+          setDisplayText(displayText.slice(0, -1))
+        }, speed / 2)
+      } else {
+        // Deletion complete, move to next word
+        setIsDeleting(false)
+        timeoutId = setTimeout(() => {
+          setWordIndex((prev) => (prev + 1) % words.length)
+        }, wordDelay)
+      }
+    }
+
+    return () => clearTimeout(timeoutId)
+  }, [displayText, isDeleting, wordIndex, words, speed, deleteDelay, wordDelay, prefersReducedMotion])
+
+  // Cursor blink
+  const [cursorVisible, setCursorVisible] = React.useState(true)
+
+  React.useEffect(() => {
+    if (!cursor || prefersReducedMotion) return
+
+    const blinkInterval = setInterval(() => {
+      setCursorVisible((prev) => !prev)
+    }, 530)
+
+    return () => clearInterval(blinkInterval)
+  }, [cursor, prefersReducedMotion])
+
+  return (
+    <span className={cn("inline", className)} {...props}>
+      {displayText}
+      {cursor && (
+        <span
+          className={cn(
+            "ml-0.5 inline-block",
+            cursorVisible ? "opacity-100" : "opacity-0"
+          )}
+          aria-hidden="true"
+        >
+          |
+        </span>
+      )}
+    </span>
+  )
+}

package/registry/ui/avatar/avatar.tsx

@@ -0,0 +1,135 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../../src/lib/utils"
+
+const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        xs: "h-6 w-6 text-xs",
+        sm: "h-8 w-8 text-sm",
+        default: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base",
+        xl: "h-16 w-16 text-lg",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+export interface AvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof avatarVariants> {
+  /** Image source URL */
+  src?: string
+  /** Alt text for the image */
+  alt?: string
+  /** Fallback initials or content when image fails to load */
+  fallback?: React.ReactNode
+}
+
+export function Avatar({
+  className,
+  size,
+  src,
+  alt,
+  fallback,
+  ...props
+}: AvatarProps) {
+  const [imageError, setImageError] = React.useState(false)
+
+  const showImage = src && !imageError
+
+  // Generate initials from alt text if no fallback provided
+  const initials = React.useMemo(() => {
+    if (fallback) return null
+    if (!alt) return null
+    return alt
+      .split(" ")
+      .map((word) => word[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase()
+  }, [alt, fallback])
+
+  return (
+    <div className={cn(avatarVariants({ size }), className)} {...props}>
+      {showImage ? (
+        <img
+          src={src}
+          alt={alt || "Avatar"}
+          onError={() => setImageError(true)}
+          className="aspect-square h-full w-full object-cover"
+        />
+      ) : (
+        <div className="flex h-full w-full items-center justify-center bg-muted font-medium text-muted-foreground">
+          {fallback || initials || (
+            <svg
+              width="50%"
+              height="50%"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+              <circle cx="12" cy="7" r="4" />
+            </svg>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Maximum number of avatars to show */
+  max?: number
+  /** Size of avatars */
+  size?: "xs" | "sm" | "default" | "lg" | "xl"
+  children: React.ReactNode
+}
+
+export function AvatarGroup({
+  children,
+  max = 4,
+  size = "default",
+  className,
+  ...props
+}: AvatarGroupProps) {
+  const childArray = React.Children.toArray(children)
+  const visibleChildren = childArray.slice(0, max)
+  const remainingCount = childArray.length - max
+
+  return (
+    <div className={cn("flex -space-x-2", className)} {...props}>
+      {visibleChildren.map((child, index) => (
+        <div
+          key={index}
+          className="ring-2 ring-background rounded-full"
+          style={{ zIndex: visibleChildren.length - index }}
+        >
+          {React.isValidElement(child)
+            ? React.cloneElement(child as React.ReactElement<AvatarProps>, { size })
+            : child}
+        </div>
+      ))}
+      {remainingCount > 0 && (
+        <div
+          className={cn(
+            avatarVariants({ size }),
+            "ring-2 ring-background flex items-center justify-center bg-muted text-muted-foreground"
+          )}
+          style={{ zIndex: 0 }}
+        >
+          +{remainingCount}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { avatarVariants }

package/registry/ui/avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar, AvatarGroup, avatarVariants, type AvatarProps, type AvatarGroupProps } from "./avatar"

package/registry/ui/badge/badge.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { Badge } from "./badge"
+
+describe("Badge", () => {
+  it("renders with default props", () => {
+    render(<Badge>Default</Badge>)
+    expect(screen.getByText("Default")).toBeInTheDocument()
+  })
+
+  it("renders with default variant styling", () => {
+    render(<Badge data-testid="badge">Default</Badge>)
+    expect(screen.getByTestId("badge")).toHaveClass("bg-primary")
+  })
+
+  it("renders with different variants", () => {
+    const { rerender } = render(<Badge variant="default" data-testid="badge">Default</Badge>)
+    expect(screen.getByTestId("badge")).toHaveClass("bg-primary")
+
+    rerender(<Badge variant="secondary" data-testid="badge">Secondary</Badge>)
+    expect(screen.getByTestId("badge")).toHaveClass("bg-secondary")
+
+    rerender(<Badge variant="destructive" data-testid="badge">Destructive</Badge>)
+    expect(screen.getByTestId("badge")).toHaveClass("bg-destructive")
+
+    rerender(<Badge variant="outline" data-testid="badge">Outline</Badge>)
+    expect(screen.getByTestId("badge")).toHaveClass("text-foreground")
+
+    rerender(<Badge variant="success" data-testid="badge">Success</Badge>)
+    expect(screen.getByTestId("badge")).toHaveClass("bg-green-500")
+
+    rerender(<Badge variant="warning" data-testid="badge">Warning</Badge>)
+    expect(screen.getByTestId("badge")).toHaveClass("bg-yellow-500")
+  })
+
+  it("applies custom className", () => {
+    render(<Badge className="custom-class" data-testid="badge">Badge</Badge>)
+    expect(screen.getByTestId("badge")).toHaveClass("custom-class")
+  })
+
+  it("renders with base styling classes", () => {
+    render(<Badge data-testid="badge">Badge</Badge>)
+    const badge = screen.getByTestId("badge")
+    expect(badge).toHaveClass("inline-flex", "items-center", "rounded-md", "border", "px-2.5", "py-0.5", "text-xs", "font-semibold")
+  })
+
+  it("passes additional props to underlying element", () => {
+    render(<Badge data-testid="badge" aria-label="status badge">Status</Badge>)
+    expect(screen.getByTestId("badge")).toHaveAttribute("aria-label", "status badge")
+  })
+})

package/registry/ui/badge/badge.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../../src/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+        success:
+          "border-transparent bg-green-500 text-white shadow hover:bg-green-500/80",
+        warning:
+          "border-transparent bg-yellow-500 text-white shadow hover:bg-yellow-500/80",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/registry/ui/badge/index.ts

@@ -0,0 +1 @@
+export { Badge, badgeVariants, type BadgeProps } from "./badge"

package/registry/ui/button/button.test.tsx

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { Button } from "./button"
+
+describe("Button", () => {
+  it("renders with default props", () => {
+    render(<Button>Click me</Button>)
+    expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument()
+  })
+
+  it("renders with different variants", () => {
+    const { rerender } = render(<Button variant="default">Default</Button>)
+    expect(screen.getByRole("button")).toHaveClass("bg-primary")
+
+    rerender(<Button variant="destructive">Destructive</Button>)
+    expect(screen.getByRole("button")).toHaveClass("bg-destructive")
+
+    rerender(<Button variant="outline">Outline</Button>)
+    expect(screen.getByRole("button")).toHaveClass("border")
+
+    rerender(<Button variant="secondary">Secondary</Button>)
+    expect(screen.getByRole("button")).toHaveClass("bg-secondary")
+
+    rerender(<Button variant="ghost">Ghost</Button>)
+    expect(screen.getByRole("button")).toHaveClass("hover:bg-accent")
+
+    rerender(<Button variant="link">Link</Button>)
+    expect(screen.getByRole("button")).toHaveClass("underline-offset-4")
+  })
+
+  it("renders with different sizes", () => {
+    const { rerender } = render(<Button size="sm">Small</Button>)
+    expect(screen.getByRole("button")).toHaveClass("h-8")
+
+    rerender(<Button size="default">Default</Button>)
+    expect(screen.getByRole("button")).toHaveClass("h-9")
+
+    rerender(<Button size="lg">Large</Button>)
+    expect(screen.getByRole("button")).toHaveClass("h-10")
+
+    rerender(<Button size="icon">Icon</Button>)
+    expect(screen.getByRole("button")).toHaveClass("w-9")
+  })
+
+  it("shows loading state", () => {
+    render(<Button loading>Submit</Button>)
+    const button = screen.getByRole("button")
+    expect(button).toBeDisabled()
+    expect(screen.getByText("Submit")).toBeInTheDocument()
+    // Check for spinner (sr-only text)
+    expect(screen.getByText("Loading")).toBeInTheDocument()
+  })
+
+  it("is disabled when disabled prop is true", () => {
+    render(<Button disabled>Disabled</Button>)
+    expect(screen.getByRole("button")).toBeDisabled()
+  })
+
+  it("calls onClick handler when clicked", () => {
+    const handleClick = vi.fn()
+    render(<Button onClick={handleClick}>Click me</Button>)
+
+    fireEvent.click(screen.getByRole("button"))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it("does not call onClick when disabled", () => {
+    const handleClick = vi.fn()
+    render(<Button onClick={handleClick} disabled>Click me</Button>)
+
+    fireEvent.click(screen.getByRole("button"))
+    expect(handleClick).not.toHaveBeenCalled()
+  })
+
+  it("does not call onClick when loading", () => {
+    const handleClick = vi.fn()
+    render(<Button onClick={handleClick} loading>Click me</Button>)
+
+    fireEvent.click(screen.getByRole("button"))
+    expect(handleClick).not.toHaveBeenCalled()
+  })
+
+  it("applies custom className", () => {
+    render(<Button className="custom-class">Custom</Button>)
+    expect(screen.getByRole("button")).toHaveClass("custom-class")
+  })
+})

package/registry/ui/button/button.tsx

@@ -0,0 +1,88 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../../src/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  loading?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, loading, children, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <svg
+              className="animate-spin"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+            <span className="sr-only">Loading</span>
+            {children}
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/registry/ui/button/index.ts

@@ -0,0 +1 @@
+export { Button, buttonVariants, type ButtonProps } from "./button"