@smicolon/fasla-ui 0.2.2

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

@@ -0,0 +1,104 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard } from "./skeleton"
+
+describe("Skeleton", () => {
+  it("renders with default props", () => {
+    render(<Skeleton data-testid="skeleton" />)
+    expect(screen.getByTestId("skeleton")).toBeInTheDocument()
+  })
+
+  it("renders with animation by default", () => {
+    render(<Skeleton data-testid="skeleton" />)
+    expect(screen.getByTestId("skeleton")).toHaveClass("animate-pulse")
+  })
+
+  it("can disable animation", () => {
+    render(<Skeleton animate={false} data-testid="skeleton" />)
+    expect(screen.getByTestId("skeleton")).not.toHaveClass("animate-pulse")
+  })
+
+  it("renders with default variant (rounded-md)", () => {
+    render(<Skeleton data-testid="skeleton" />)
+    expect(screen.getByTestId("skeleton")).toHaveClass("rounded-md")
+  })
+
+  it("renders with circular variant", () => {
+    render(<Skeleton variant="circular" data-testid="skeleton" />)
+    expect(screen.getByTestId("skeleton")).toHaveClass("rounded-full")
+  })
+
+  it("renders with rectangular variant", () => {
+    render(<Skeleton variant="rectangular" data-testid="skeleton" />)
+    expect(screen.getByTestId("skeleton")).toHaveClass("rounded-none")
+  })
+
+  it("applies custom className", () => {
+    render(<Skeleton className="h-10 w-20" data-testid="skeleton" />)
+    expect(screen.getByTestId("skeleton")).toHaveClass("h-10", "w-20")
+  })
+})
+
+describe("SkeletonText", () => {
+  it("renders with default 3 lines", () => {
+    render(<SkeletonText data-testid="skeleton-text" />)
+    const container = screen.getByTestId("skeleton-text")
+    expect(container.children).toHaveLength(3)
+  })
+
+  it("renders with specified number of lines", () => {
+    render(<SkeletonText lines={5} data-testid="skeleton-text" />)
+    const container = screen.getByTestId("skeleton-text")
+    expect(container.children).toHaveLength(5)
+  })
+
+  it("last line is shorter when multiple lines", () => {
+    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")
+  })
+
+  it("single line is full width", () => {
+    render(<SkeletonText lines={1} data-testid="skeleton-text" />)
+    const container = screen.getByTestId("skeleton-text")
+    const line = container.children[0]
+    expect(line).toHaveClass("w-full")
+  })
+})
+
+describe("SkeletonAvatar", () => {
+  it("renders with circular variant", () => {
+    render(<SkeletonAvatar data-testid="skeleton-avatar" />)
+    expect(screen.getByTestId("skeleton-avatar")).toHaveClass("rounded-full")
+  })
+
+  it("renders with default size", () => {
+    render(<SkeletonAvatar data-testid="skeleton-avatar" />)
+    expect(screen.getByTestId("skeleton-avatar")).toHaveClass("h-10", "w-10")
+  })
+
+  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")
+  })
+})
+
+describe("SkeletonCard", () => {
+  it("renders a card container", () => {
+    render(<SkeletonCard data-testid="skeleton-card" />)
+    expect(screen.getByTestId("skeleton-card")).toHaveClass("rounded-xl", "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("contains text skeletons", () => {
+    const { container } = render(<SkeletonCard />)
+    const skeletons = container.querySelectorAll(".animate-pulse")
+    expect(skeletons.length).toBeGreaterThan(0)
+  })
+})

package/registry/ui/skeleton/skeleton.tsx

@@ -0,0 +1,88 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The shape of the skeleton */
+  variant?: "default" | "circular" | "rectangular"
+  /** Whether to animate the skeleton */
+  animate?: boolean
+}
+
+function Skeleton({
+  className,
+  variant = "default",
+  animate = true,
+  ...props
+}: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "bg-primary/10",
+        animate && "animate-pulse",
+        variant === "default" && "rounded-md",
+        variant === "circular" && "rounded-full",
+        variant === "rectangular" && "rounded-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Pre-built skeleton for text lines */
+function SkeletonText({
+  className,
+  lines = 3,
+  ...props
+}: SkeletonProps & { lines?: number }) {
+  return (
+    <div className={cn("space-y-2", className)} {...props}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          key={i}
+          className={cn(
+            "h-4",
+            i === lines - 1 && lines > 1 ? "w-4/5" : "w-full"
+          )}
+        />
+      ))}
+    </div>
+  )
+}
+
+/** Pre-built skeleton for avatars */
+function SkeletonAvatar({ className, ...props }: SkeletonProps) {
+  return (
+    <Skeleton
+      variant="circular"
+      className={cn("h-10 w-10", className)}
+      {...props}
+    />
+  )
+}
+
+/** Pre-built skeleton for cards */
+function SkeletonCard({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-xl border bg-card p-6 shadow",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center space-x-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>
+    </div>
+  )
+}
+
+export { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard }

package/registry/ui/switch/index.ts

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from "./switch"

package/registry/ui/switch/switch.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface SwitchProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+  /** Label text */
+  label?: string
+  /** Description text */
+  description?: string
+  /** Size variant */
+  size?: "sm" | "default" | "lg"
+}
+
+const sizeClasses = {
+  sm: {
+    track: "h-4 w-7",
+    thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
+  },
+  default: {
+    track: "h-5 w-9",
+    thumb: "h-4 w-4 data-[state=checked]:translate-x-4",
+  },
+  lg: {
+    track: "h-6 w-11",
+    thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+  },
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, label, description, size = "default", id, ...props }, ref) => {
+    const inputId = id || React.useId()
+    const sizes = sizeClasses[size]
+
+    const switchElement = (
+      <label
+        htmlFor={inputId}
+        className={cn(
+          "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+          "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "bg-input has-[:checked]:bg-primary",
+          sizes.track,
+          className
+        )}
+      >
+        <input
+          type="checkbox"
+          ref={ref}
+          id={inputId}
+          className="sr-only"
+          {...props}
+        />
+        <span
+          data-state={props.checked ? "checked" : "unchecked"}
+          className={cn(
+            "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+            sizes.thumb
+          )}
+        />
+      </label>
+    )
+
+    if (!label && !description) {
+      return switchElement
+    }
+
+    return (
+      <div className="flex items-center justify-between gap-4">
+        <div className="grid gap-1">
+          {label && (
+            <label
+              htmlFor={inputId}
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              {label}
+            </label>
+          )}
+          {description && (
+            <p className="text-xs text-muted-foreground">{description}</p>
+          )}
+        </div>
+        {switchElement}
+      </div>
+    )
+  }
+)
+Switch.displayName = "Switch"
+
+export { Switch }

package/registry/ui/tabs/index.ts

@@ -0,0 +1,10 @@
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentProps,
+} from "./tabs"

package/registry/ui/tabs/tabs.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+interface TabsContextValue {
+  value: string
+  onValueChange: (value: string) => void
+}
+
+const TabsContext = React.createContext<TabsContextValue | null>(null)
+
+function useTabsContext() {
+  const context = React.useContext(TabsContext)
+  if (!context) {
+    throw new Error("Tabs components must be used within a Tabs provider")
+  }
+  return context
+}
+
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The controlled value of the tab to activate */
+  value?: string
+  /** The default value of the tab to activate */
+  defaultValue?: string
+  /** Called when the value changes */
+  onValueChange?: (value: string) => void
+  children: React.ReactNode
+}
+
+export function Tabs({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  children,
+  className,
+  ...props
+}: TabsProps) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    defaultValue || ""
+  )
+  const value = controlledValue ?? uncontrolledValue
+
+  const handleValueChange = React.useCallback(
+    (newValue: string) => {
+      setUncontrolledValue(newValue)
+      onValueChange?.(newValue)
+    },
+    [onValueChange]
+  )
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>
+      <div className={cn("w-full", className)} {...props}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  )
+}
+
+export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+}
+
+export function TabsList({ className, children, ...props }: TabsListProps) {
+  return (
+    <div
+      role="tablist"
+      className={cn(
+        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface TabsTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The unique value for the tab */
+  value: string
+  children: React.ReactNode
+}
+
+export function TabsTrigger({
+  value,
+  className,
+  children,
+  ...props
+}: TabsTriggerProps) {
+  const { value: selectedValue, onValueChange } = useTabsContext()
+  const isSelected = selectedValue === value
+
+  return (
+    <button
+      role="tab"
+      type="button"
+      aria-selected={isSelected}
+      data-state={isSelected ? "active" : "inactive"}
+      onClick={() => onValueChange(value)}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        isSelected
+          ? "bg-background text-foreground shadow"
+          : "hover:bg-background/50 hover:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The unique value for the tab panel */
+  value: string
+  children: React.ReactNode
+}
+
+export function TabsContent({
+  value,
+  className,
+  children,
+  ...props
+}: TabsContentProps) {
+  const { value: selectedValue } = useTabsContext()
+  const isSelected = selectedValue === value
+
+  if (!isSelected) return null
+
+  return (
+    <div
+      role="tabpanel"
+      data-state={isSelected ? "active" : "inactive"}
+      className={cn(
+        "mt-2 ring-offset-background",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/registry/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea, textareaVariants, type TextareaProps } from "./textarea"

package/registry/ui/textarea/textarea.tsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../../src/lib/utils"
+
+const textareaVariants = cva(
+  "flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "border-input shadow-sm",
+        error: "border-destructive focus-visible:ring-destructive",
+      },
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        horizontal: "resize-x",
+        both: "resize",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      resize: "vertical",
+    },
+  }
+)
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    VariantProps<typeof textareaVariants> {
+  /** Show character count */
+  showCount?: boolean
+  /** Maximum character count */
+  maxLength?: number
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, variant, resize, showCount, maxLength, ...props }, ref) => {
+    const [count, setCount] = React.useState(
+      (props.defaultValue as string)?.length || 0
+    )
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setCount(e.target.value.length)
+      props.onChange?.(e)
+    }
+
+    const textarea = (
+      <textarea
+        className={cn(textareaVariants({ variant, resize }), className)}
+        ref={ref}
+        maxLength={maxLength}
+        onChange={handleChange}
+        {...props}
+      />
+    )
+
+    if (!showCount) {
+      return textarea
+    }
+
+    return (
+      <div className="relative">
+        {textarea}
+        <div className="absolute bottom-2 right-3 text-xs text-muted-foreground">
+          {maxLength ? `${count}/${maxLength}` : count}
+        </div>
+      </div>
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea, textareaVariants }