@smicolon/fasla-ui 0.2.2

package/registry/blocks/empty-state/EmptyState.test.tsx

@@ -0,0 +1,120 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { EmptyState, EmptySearchResults, EmptyData } from "./EmptyState"
+
+describe("EmptyState", () => {
+  it("renders with required title prop", () => {
+    render(<EmptyState title="No items found" />)
+    expect(screen.getByText("No items found")).toBeInTheDocument()
+  })
+
+  it("renders with description", () => {
+    render(
+      <EmptyState
+        title="No items"
+        description="Start by adding your first item"
+      />
+    )
+    expect(screen.getByText("Start by adding your first item")).toBeInTheDocument()
+  })
+
+  it("renders with icon", () => {
+    render(
+      <EmptyState
+        title="Empty"
+        icon={<span data-testid="icon">📭</span>}
+      />
+    )
+    expect(screen.getByTestId("icon")).toBeInTheDocument()
+  })
+
+  it("renders with action", () => {
+    render(
+      <EmptyState
+        title="No items"
+        action={<button>Add Item</button>}
+      />
+    )
+    expect(screen.getByRole("button", { name: "Add Item" })).toBeInTheDocument()
+  })
+
+  it("renders with secondary action", () => {
+    render(
+      <EmptyState
+        title="No items"
+        action={<button>Primary</button>}
+        secondaryAction={<button>Secondary</button>}
+      />
+    )
+    expect(screen.getByRole("button", { name: "Primary" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Secondary" })).toBeInTheDocument()
+  })
+
+  it("renders with small size", () => {
+    render(<EmptyState title="Empty" size="sm" data-testid="empty" />)
+    expect(screen.getByTestId("empty")).toHaveClass("py-8")
+  })
+
+  it("renders with default size", () => {
+    render(<EmptyState title="Empty" size="default" data-testid="empty" />)
+    expect(screen.getByTestId("empty")).toHaveClass("py-12")
+  })
+
+  it("renders with large size", () => {
+    render(<EmptyState title="Empty" size="lg" data-testid="empty" />)
+    expect(screen.getByTestId("empty")).toHaveClass("py-16")
+  })
+
+  it("applies custom className", () => {
+    render(<EmptyState title="Empty" className="custom-class" data-testid="empty" />)
+    expect(screen.getByTestId("empty")).toHaveClass("custom-class")
+  })
+})
+
+describe("EmptySearchResults", () => {
+  it("renders with default no results message", () => {
+    render(<EmptySearchResults />)
+    expect(screen.getByText("No results found")).toBeInTheDocument()
+  })
+
+  it("renders with query in description", () => {
+    render(<EmptySearchResults query="test search" />)
+    expect(screen.getByText('No results for "test search". Try a different search term.')).toBeInTheDocument()
+  })
+
+  it("renders without query showing generic message", () => {
+    render(<EmptySearchResults />)
+    expect(screen.getByText("Try adjusting your search or filters.")).toBeInTheDocument()
+  })
+
+  it("renders search icon", () => {
+    const { container } = render(<EmptySearchResults />)
+    const svg = container.querySelector("svg")
+    expect(svg).toBeInTheDocument()
+  })
+})
+
+describe("EmptyData", () => {
+  it("renders with default resource name", () => {
+    render(<EmptyData />)
+    expect(screen.getByText("No items yet")).toBeInTheDocument()
+    expect(screen.getByText("Get started by creating your first item.")).toBeInTheDocument()
+  })
+
+  it("renders with custom resource name", () => {
+    render(<EmptyData resourceName="projects" />)
+    expect(screen.getByText("No projects yet")).toBeInTheDocument()
+    expect(screen.getByText("Get started by creating your first project.")).toBeInTheDocument()
+  })
+
+  it("renders with action passed through", () => {
+    render(<EmptyData action={<button>Create</button>} />)
+    expect(screen.getByRole("button", { name: "Create" })).toBeInTheDocument()
+  })
+
+  it("renders document icon", () => {
+    const { container } = render(<EmptyData />)
+    const svg = container.querySelector("svg")
+    expect(svg).toBeInTheDocument()
+  })
+})

package/registry/blocks/empty-state/EmptyState.tsx

@@ -0,0 +1,164 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Icon to display (should be a React element) */
+  icon?: React.ReactNode
+  /** Main title */
+  title: string
+  /** Description text */
+  description?: string
+  /** Primary action button/link */
+  action?: React.ReactNode
+  /** Secondary action */
+  secondaryAction?: React.ReactNode
+  /** Size variant */
+  size?: "sm" | "default" | "lg"
+}
+
+const sizeClasses = {
+  sm: {
+    container: "py-8",
+    icon: "[&_svg]:h-8 [&_svg]:w-8",
+    title: "text-base",
+    description: "text-sm",
+  },
+  default: {
+    container: "py-12",
+    icon: "[&_svg]:h-12 [&_svg]:w-12",
+    title: "text-lg",
+    description: "text-sm",
+  },
+  lg: {
+    container: "py-16",
+    icon: "[&_svg]:h-16 [&_svg]:w-16",
+    title: "text-xl",
+    description: "text-base",
+  },
+}
+
+/**
+ * Empty state component for displaying when there's no data.
+ * Provides contextual messaging and primary actions to guide users.
+ */
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  secondaryAction,
+  size = "default",
+  className,
+  ...props
+}: EmptyStateProps) {
+  const sizes = sizeClasses[size]
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center text-center",
+        sizes.container,
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <div
+          className={cn(
+            "mb-4 text-muted-foreground/50",
+            sizes.icon
+          )}
+        >
+          {icon}
+        </div>
+      )}
+      <h3 className={cn("font-semibold text-foreground", sizes.title)}>
+        {title}
+      </h3>
+      {description && (
+        <p
+          className={cn(
+            "mt-2 max-w-sm text-muted-foreground",
+            sizes.description
+          )}
+        >
+          {description}
+        </p>
+      )}
+      {(action || secondaryAction) && (
+        <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
+          {action}
+          {secondaryAction}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** Pre-built empty state for no search results */
+export function EmptySearchResults({
+  query,
+  onClear,
+  ...props
+}: Omit<EmptyStateProps, "title" | "description"> & {
+  query?: string
+  onClear?: () => void
+}) {
+  return (
+    <EmptyState
+      title="No results found"
+      description={
+        query
+          ? `No results for "${query}". Try a different search term.`
+          : "Try adjusting your search or filters."
+      }
+      icon={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+          />
+        </svg>
+      }
+      {...props}
+    />
+  )
+}
+
+/** Pre-built empty state for no data */
+export function EmptyData({
+  resourceName = "items",
+  ...props
+}: Omit<EmptyStateProps, "title" | "description"> & {
+  resourceName?: string
+}) {
+  return (
+    <EmptyState
+      title={`No ${resourceName} yet`}
+      description={`Get started by creating your first ${resourceName.replace(/s$/, "")}.`}
+      icon={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+          />
+        </svg>
+      }
+      {...props}
+    />
+  )
+}

package/registry/blocks/empty-state/index.ts

@@ -0,0 +1,6 @@
+export {
+  EmptyState,
+  EmptySearchResults,
+  EmptyData,
+  type EmptyStateProps,
+} from "./EmptyState"

package/registry/blocks/form-section/FormSection.tsx

@@ -0,0 +1,140 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface FormSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Section title */
+  title: string
+  /** Section description */
+  description?: string
+  /** Form fields content */
+  children: React.ReactNode
+  /** Whether to show a divider at the bottom */
+  divider?: boolean
+}
+
+/**
+ * Form section for grouping related form fields.
+ * Provides consistent spacing and typography for form organization.
+ */
+export function FormSection({
+  title,
+  description,
+  children,
+  divider = true,
+  className,
+  ...props
+}: FormSectionProps) {
+  return (
+    <div
+      className={cn(
+        "grid gap-6 pb-6",
+        divider && "border-b",
+        className
+      )}
+      {...props}
+    >
+      <div className="space-y-1">
+        <h3 className="text-base font-medium">{title}</h3>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+      <div className="grid gap-4">{children}</div>
+    </div>
+  )
+}
+
+export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Field label */
+  label: string
+  /** Field description/help text */
+  description?: string
+  /** Error message */
+  error?: string
+  /** Whether the field is required */
+  required?: boolean
+  /** The form input element */
+  children: React.ReactNode
+  /** HTML for attribute to connect label with input */
+  htmlFor?: string
+}
+
+/**
+ * Form field wrapper with label, description, and error handling.
+ */
+export function FormField({
+  label,
+  description,
+  error,
+  required,
+  children,
+  htmlFor,
+  className,
+  ...props
+}: FormFieldProps) {
+  return (
+    <div className={cn("space-y-2", className)} {...props}>
+      <label
+        htmlFor={htmlFor}
+        className={cn(
+          "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          error && "text-destructive"
+        )}
+      >
+        {label}
+        {required && <span className="ml-1 text-destructive">*</span>}
+      </label>
+      {children}
+      {description && !error && (
+        <p className="text-xs text-muted-foreground">{description}</p>
+      )}
+      {error && (
+        <p className="text-xs text-destructive" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export interface FormActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Action buttons */
+  children: React.ReactNode
+  /** Alignment of actions */
+  align?: "left" | "right" | "center" | "between"
+  /** Whether to make it sticky at the bottom */
+  sticky?: boolean
+}
+
+const alignClasses = {
+  left: "justify-start",
+  right: "justify-end",
+  center: "justify-center",
+  between: "justify-between",
+}
+
+/**
+ * Form actions bar for submit/cancel buttons.
+ * Can be sticky at the bottom of the form.
+ */
+export function FormActions({
+  children,
+  align = "right",
+  sticky = false,
+  className,
+  ...props
+}: FormActionsProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 pt-6",
+        alignClasses[align],
+        sticky && "sticky bottom-0 border-t bg-background py-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/registry/blocks/form-section/index.ts

@@ -0,0 +1,8 @@
+export {
+  FormSection,
+  FormField,
+  FormActions,
+  type FormSectionProps,
+  type FormFieldProps,
+  type FormActionsProps,
+} from "./FormSection"

package/registry/blocks/navbar/Navbar.tsx

@@ -0,0 +1,190 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
+  /** Whether the navbar is sticky */
+  sticky?: boolean
+  /** Whether to show border at bottom */
+  bordered?: boolean
+  children: React.ReactNode
+}
+
+export function Navbar({
+  sticky = true,
+  bordered = true,
+  className,
+  children,
+  ...props
+}: NavbarProps) {
+  return (
+    <nav
+      className={cn(
+        "z-50 flex h-14 w-full items-center bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+        sticky && "sticky top-0",
+        bordered && "border-b",
+        className
+      )}
+      {...props}
+    >
+      <div className="container flex h-full items-center px-4">
+        {children}
+      </div>
+    </nav>
+  )
+}
+
+export interface NavbarBrandProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+}
+
+export function NavbarBrand({ className, children, ...props }: NavbarBrandProps) {
+  return (
+    <div
+      className={cn("flex items-center gap-2 font-semibold", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface NavbarContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Alignment of content */
+  align?: "start" | "center" | "end"
+  children: React.ReactNode
+}
+
+export function NavbarContent({
+  align = "start",
+  className,
+  children,
+  ...props
+}: NavbarContentProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-1 items-center gap-4",
+        align === "start" && "justify-start",
+        align === "center" && "justify-center",
+        align === "end" && "justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface NavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+}
+
+export function NavbarItem({ className, children, ...props }: NavbarItemProps) {
+  return (
+    <div className={cn("flex items-center", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export interface NavbarLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Whether link is active */
+  active?: boolean
+  children: React.ReactNode
+}
+
+export function NavbarLink({
+  active,
+  className,
+  children,
+  ...props
+}: NavbarLinkProps) {
+  return (
+    <a
+      className={cn(
+        "text-sm font-medium transition-colors hover:text-foreground",
+        active ? "text-foreground" : "text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </a>
+  )
+}
+
+export interface NavbarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Whether to show on mobile */
+  mobileMenu?: boolean
+  children: React.ReactNode
+}
+
+export function NavbarMenu({
+  mobileMenu,
+  className,
+  children,
+  ...props
+}: NavbarMenuProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-6",
+        mobileMenu && "hidden md:flex",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface NavbarToggleProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Whether menu is open */
+  open?: boolean
+}
+
+export function NavbarToggle({
+  open,
+  className,
+  ...props
+}: NavbarToggleProps) {
+  return (
+    <button
+      className={cn(
+        "flex h-9 w-9 items-center justify-center rounded-md md:hidden",
+        "hover:bg-accent hover:text-accent-foreground",
+        className
+      )}
+      aria-label={open ? "Close menu" : "Open menu"}
+      {...props}
+    >
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        {open ? (
+          <>
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </>
+        ) : (
+          <>
+            <line x1="4" y1="12" x2="20" y2="12" />
+            <line x1="4" y1="6" x2="20" y2="6" />
+            <line x1="4" y1="18" x2="20" y2="18" />
+          </>
+        )}
+      </svg>
+    </button>
+  )
+}

package/registry/blocks/navbar/index.ts

@@ -0,0 +1,16 @@
+export {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  NavbarLink,
+  NavbarMenu,
+  NavbarToggle,
+  type NavbarProps,
+  type NavbarBrandProps,
+  type NavbarContentProps,
+  type NavbarItemProps,
+  type NavbarLinkProps,
+  type NavbarMenuProps,
+  type NavbarToggleProps,
+} from "./Navbar"