@smicolon/fasla-ui 0.2.2

package/dist/registry/index.js

@@ -0,0 +1,145 @@
+// src/registry/index.ts
+var registry = [
+  // UI Primitives
+  {
+    name: "button",
+    type: "ui",
+    title: "Button",
+    description: "A button component with multiple variants, sizes, and loading state.",
+    sourcePath: "registry/ui/button",
+    dependencies: ["@radix-ui/react-slot", "class-variance-authority"],
+    categories: ["primitives", "forms"]
+  },
+  {
+    name: "input",
+    type: "ui",
+    title: "Input",
+    description: "An input component with variants for validation states and icon support.",
+    sourcePath: "registry/ui/input",
+    dependencies: ["class-variance-authority"],
+    categories: ["primitives", "forms"]
+  },
+  {
+    name: "card",
+    type: "ui",
+    title: "Card",
+    description: "A card component with header, content, and footer sections.",
+    sourcePath: "registry/ui/card",
+    categories: ["primitives", "layout"]
+  },
+  {
+    name: "badge",
+    type: "ui",
+    title: "Badge",
+    description: "A badge component for status indicators with multiple variants.",
+    sourcePath: "registry/ui/badge",
+    dependencies: ["class-variance-authority"],
+    categories: ["primitives", "data-display"]
+  },
+  {
+    name: "skeleton",
+    type: "ui",
+    title: "Skeleton",
+    description: "Loading skeleton placeholders with pre-built variants for text, avatars, and cards.",
+    sourcePath: "registry/ui/skeleton",
+    categories: ["primitives", "feedback"]
+  },
+  // Blocks
+  {
+    name: "app-shell",
+    type: "block",
+    title: "App Shell",
+    description: "Application shell with sidebar, header, and content area.",
+    sourcePath: "registry/blocks/app-shell",
+    categories: ["layout", "application"]
+  },
+  {
+    name: "page-header",
+    type: "block",
+    title: "Page Header",
+    description: "Page header with title, breadcrumb, description, and actions.",
+    sourcePath: "registry/blocks/page-header",
+    categories: ["layout", "navigation"]
+  },
+  {
+    name: "empty-state",
+    type: "block",
+    title: "Empty State",
+    description: "Empty state component with icon, title, description, and actions.",
+    sourcePath: "registry/blocks/empty-state",
+    categories: ["feedback", "data-display"]
+  },
+  {
+    name: "form-section",
+    type: "block",
+    title: "Form Section",
+    description: "Form section with title, description, fields, and actions.",
+    sourcePath: "registry/blocks/form-section",
+    categories: ["forms", "layout"]
+  },
+  {
+    name: "data-table",
+    type: "block",
+    title: "Data Table",
+    description: "Data table with sorting, pagination, and custom cell rendering.",
+    sourcePath: "registry/blocks/data-table",
+    categories: ["data-display", "tables"]
+  },
+  // Effects
+  {
+    name: "shimmer-button",
+    type: "effect",
+    title: "Shimmer Button",
+    description: "A button with animated shimmer effect.",
+    sourcePath: "registry/effects/shimmer-button",
+    dependencies: ["framer-motion"],
+    categories: ["effects", "buttons"]
+  },
+  {
+    name: "animated-gradient",
+    type: "effect",
+    title: "Animated Gradient",
+    description: "Animated gradient background and text effects.",
+    sourcePath: "registry/effects/animated-gradient",
+    dependencies: ["framer-motion"],
+    categories: ["effects", "backgrounds"]
+  },
+  {
+    name: "text-reveal",
+    type: "effect",
+    title: "Text Reveal",
+    description: "Character and word reveal animations.",
+    sourcePath: "registry/effects/text-reveal",
+    dependencies: ["framer-motion"],
+    categories: ["effects", "text"]
+  },
+  {
+    name: "border-beam",
+    type: "effect",
+    title: "Border Beam",
+    description: "Animated border beam and glowing border effects.",
+    sourcePath: "registry/effects/border-beam",
+    dependencies: ["framer-motion"],
+    categories: ["effects", "borders"]
+  },
+  {
+    name: "spotlight",
+    type: "effect",
+    title: "Spotlight",
+    description: "Cursor-following spotlight effect.",
+    sourcePath: "registry/effects/spotlight",
+    dependencies: ["framer-motion"],
+    categories: ["effects", "interactive"]
+  }
+];
+function getRegistryItem(name) {
+  return registry.find((item) => item.name === name);
+}
+function getRegistryItemsByType(type) {
+  return registry.filter((item) => item.type === type);
+}
+function getRegistryItemsByCategory(category) {
+  return registry.filter((item) => item.categories?.includes(category));
+}
+
+export { getRegistryItem, getRegistryItemsByCategory, getRegistryItemsByType, registry };

package/dist/tokens/index.d.ts

@@ -0,0 +1,55 @@
+type Density = "compact" | "comfortable" | "spacious";
+interface TokenSet {
+    radius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    spacing: {
+        /** Multipliers for vertical rhythm based on density */
+        densityMultiplier: Record<Density, number>;
+    };
+    typography: {
+        fontFamily: string;
+        baseFontSizePx: number;
+        lineHeight: number;
+    };
+    motion: {
+        durationsMs: {
+            fast: number;
+            base: number;
+            slow: number;
+        };
+    };
+}
+declare const baseTokens: TokenSet;
+
+/**
+ * Tailwind mapping helper (scaffold).
+ * In real projects, you typically map semantic CSS vars into Tailwind's theme.
+ */
+declare const tailwindSemanticColors: {
+    border: string;
+    input: string;
+    ring: string;
+    background: string;
+    foreground: string;
+    primary: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    secondary: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    muted: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    destructive: {
+        DEFAULT: string;
+        foreground: string;
+    };
+};
+
+export { type Density, type TokenSet, baseTokens, tailwindSemanticColors };

package/dist/tokens/index.js

@@ -0,0 +1,34 @@
+// src/tokens/model.ts
+var baseTokens = {
+  radius: { sm: "0.5rem", md: "0.75rem", lg: "1rem" },
+  spacing: { densityMultiplier: { compact: 0.9, comfortable: 1, spacious: 1.1 } },
+  typography: { fontFamily: "Inter", baseFontSizePx: 16, lineHeight: 1.5 },
+  motion: { durationsMs: { fast: 120, base: 180, slow: 260 } }
+};
+
+// src/tokens/tailwind.ts
+var tailwindSemanticColors = {
+  border: "hsl(var(--border))",
+  input: "hsl(var(--input))",
+  ring: "hsl(var(--ring))",
+  background: "hsl(var(--background))",
+  foreground: "hsl(var(--foreground))",
+  primary: {
+    DEFAULT: "hsl(var(--primary))",
+    foreground: "hsl(var(--primary-foreground))"
+  },
+  secondary: {
+    DEFAULT: "hsl(var(--secondary))",
+    foreground: "hsl(var(--secondary-foreground))"
+  },
+  muted: {
+    DEFAULT: "hsl(var(--muted))",
+    foreground: "hsl(var(--muted-foreground))"
+  },
+  destructive: {
+    DEFAULT: "hsl(var(--destructive))",
+    foreground: "hsl(var(--destructive-foreground))"
+  }
+};
+
+export { baseTokens, tailwindSemanticColors };

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@smicolon/fasla-ui",
+  "version": "0.2.2",
+  "description": "Professional UI components with animations and app building blocks",
+  "license": "MIT",
+  "author": "Smicolon",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/smicolon/fasla-ui"
+  },
+  "homepage": "https://ui.smicolon.com",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "tailwindcss",
+    "framer-motion",
+    "shadcn",
+    "design-system",
+    "animations"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    },
+    "./motion": {
+      "types": "./dist/motion/index.d.ts",
+      "import": "./dist/motion/index.js"
+    },
+    "./registry": {
+      "types": "./dist/registry/index.d.ts",
+      "import": "./dist/registry/index.js"
+    },
+    "./lib/utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    }
+  },
+  "files": [
+    "dist",
+    "registry",
+    "registry.json"
+  ],
+  "bin": {
+    "fasla-ui": "./bin/fasla-ui.mjs"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^14.2.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.57.0",
+    "framer-motion": "^11.0.0",
+    "jsdom": "^24.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.6.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "framer-motion": "^11.0.0",
+    "tailwindcss": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "framer-motion": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/registry/blocks/app-shell/AppShell.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Sidebar content, hidden on mobile by default */
+  sidebar?: React.ReactNode
+  /** Header content */
+  header?: React.ReactNode
+  /** Main content */
+  children: React.ReactNode
+  /** Width of the sidebar */
+  sidebarWidth?: "sm" | "md" | "lg"
+  /** Whether to show sidebar on mobile */
+  sidebarMobile?: boolean
+}
+
+const sidebarWidths = {
+  sm: "w-56",
+  md: "w-64",
+  lg: "w-72",
+}
+
+/**
+ * Application shell with sidebar, header, and content area.
+ * Provides the main layout structure for dashboard-style applications.
+ */
+export function AppShell({
+  sidebar,
+  header,
+  children,
+  sidebarWidth = "md",
+  sidebarMobile = false,
+  className,
+  ...props
+}: AppShellProps) {
+  return (
+    <div
+      className={cn("min-h-dvh bg-background text-foreground", className)}
+      {...props}
+    >
+      <div className="flex min-h-dvh">
+        {sidebar && (
+          <aside
+            className={cn(
+              "shrink-0 border-r bg-muted/30",
+              sidebarWidths[sidebarWidth],
+              sidebarMobile ? "block" : "hidden md:block"
+            )}
+          >
+            {sidebar}
+          </aside>
+        )}
+        <div className="flex min-w-0 flex-1 flex-col">
+          {header && (
+            <header className="shrink-0 border-b bg-background">
+              {header}
+            </header>
+          )}
+          <main className="min-w-0 flex-1 overflow-auto p-4 md:p-6">
+            {children}
+          </main>
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/blocks/app-shell/index.ts

@@ -0,0 +1 @@
+export { AppShell, type AppShellProps } from "./AppShell"

package/registry/blocks/data-table/DataTable.tsx

@@ -0,0 +1,292 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+// Column definition
+export interface Column<T> {
+  /** Unique identifier for the column */
+  id: string
+  /** Header text or element */
+  header: React.ReactNode
+  /** Cell renderer function */
+  cell: (row: T) => React.ReactNode
+  /** Whether the column is sortable */
+  sortable?: boolean
+  /** Column width class */
+  width?: string
+  /** Alignment */
+  align?: "left" | "center" | "right"
+}
+
+export interface DataTableProps<T> extends React.HTMLAttributes<HTMLDivElement> {
+  /** Data to display */
+  data: T[]
+  /** Column definitions */
+  columns: Column<T>[]
+  /** Unique key extractor for each row */
+  getRowKey: (row: T) => string | number
+  /** Loading state */
+  loading?: boolean
+  /** Empty state content */
+  emptyState?: React.ReactNode
+  /** Called when a row is clicked */
+  onRowClick?: (row: T) => void
+  /** Currently selected row key */
+  selectedKey?: string | number
+  /** Sticky header */
+  stickyHeader?: boolean
+}
+
+const alignClasses = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+}
+
+/**
+ * Data table component for displaying tabular data.
+ * Supports sorting, row selection, and custom cell rendering.
+ */
+export function DataTable<T>({
+  data,
+  columns,
+  getRowKey,
+  loading = false,
+  emptyState,
+  onRowClick,
+  selectedKey,
+  stickyHeader = false,
+  className,
+  ...props
+}: DataTableProps<T>) {
+  if (loading) {
+    return (
+      <div className={cn("rounded-md border", className)} {...props}>
+        <div className="overflow-x-auto">
+          <table className="w-full caption-bottom text-sm">
+            <thead className={cn(stickyHeader && "sticky top-0 z-10 bg-muted/50")}>
+              <tr className="border-b transition-colors">
+                {columns.map((column) => (
+                  <th
+                    key={column.id}
+                    className={cn(
+                      "h-10 px-4 font-medium text-muted-foreground",
+                      alignClasses[column.align || "left"],
+                      column.width
+                    )}
+                  >
+                    {column.header}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: 5 }).map((_, i) => (
+                <tr key={i} className="border-b">
+                  {columns.map((column) => (
+                    <td key={column.id} className="h-12 px-4">
+                      <div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    )
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className={cn("rounded-md border", className)} {...props}>
+        <div className="overflow-x-auto">
+          <table className="w-full caption-bottom text-sm">
+            <thead className={cn(stickyHeader && "sticky top-0 z-10 bg-muted/50")}>
+              <tr className="border-b transition-colors">
+                {columns.map((column) => (
+                  <th
+                    key={column.id}
+                    className={cn(
+                      "h-10 px-4 font-medium text-muted-foreground",
+                      alignClasses[column.align || "left"],
+                      column.width
+                    )}
+                  >
+                    {column.header}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+          </table>
+        </div>
+        <div className="py-8">
+          {emptyState || (
+            <p className="text-center text-sm text-muted-foreground">
+              No data to display.
+            </p>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("rounded-md border", className)} {...props}>
+      <div className="overflow-x-auto">
+        <table className="w-full caption-bottom text-sm">
+          <thead className={cn(stickyHeader && "sticky top-0 z-10 bg-muted/50")}>
+            <tr className="border-b transition-colors hover:bg-muted/50">
+              {columns.map((column) => (
+                <th
+                  key={column.id}
+                  className={cn(
+                    "h-10 px-4 font-medium text-muted-foreground",
+                    alignClasses[column.align || "left"],
+                    column.width
+                  )}
+                >
+                  {column.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row) => {
+              const key = getRowKey(row)
+              const isSelected = selectedKey === key
+
+              return (
+                <tr
+                  key={key}
+                  className={cn(
+                    "border-b transition-colors",
+                    onRowClick && "cursor-pointer hover:bg-muted/50",
+                    isSelected && "bg-muted"
+                  )}
+                  onClick={() => onRowClick?.(row)}
+                >
+                  {columns.map((column) => (
+                    <td
+                      key={column.id}
+                      className={cn(
+                        "p-4",
+                        alignClasses[column.align || "left"],
+                        column.width
+                      )}
+                    >
+                      {column.cell(row)}
+                    </td>
+                  ))}
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export interface PaginationProps {
+  /** Current page (1-indexed) */
+  page: number
+  /** Total number of pages */
+  totalPages: number
+  /** Called when page changes */
+  onPageChange: (page: number) => void
+  /** Show page numbers */
+  showPageNumbers?: boolean
+  className?: string
+}
+
+/**
+ * Pagination component for data tables.
+ */
+export function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  showPageNumbers = true,
+  className,
+}: PaginationProps) {
+  const canGoPrevious = page > 1
+  const canGoNext = page < totalPages
+
+  // Generate page numbers to show
+  const getPageNumbers = () => {
+    const pages: (number | "ellipsis")[] = []
+    const showEllipsisAfter = page < totalPages - 2
+    const showEllipsisBefore = page > 3
+
+    if (totalPages <= 7) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1)
+    }
+
+    pages.push(1)
+    if (showEllipsisBefore) pages.push("ellipsis")
+
+    const start = Math.max(2, page - 1)
+    const end = Math.min(totalPages - 1, page + 1)
+
+    for (let i = start; i <= end; i++) {
+      if (!pages.includes(i)) pages.push(i)
+    }
+
+    if (showEllipsisAfter) pages.push("ellipsis")
+    if (!pages.includes(totalPages)) pages.push(totalPages)
+
+    return pages
+  }
+
+  return (
+    <nav
+      className={cn("flex items-center justify-between px-2 py-3", className)}
+      aria-label="Pagination"
+    >
+      <p className="text-sm text-muted-foreground">
+        Page {page} of {totalPages}
+      </p>
+      <div className="flex items-center gap-1">
+        <button
+          onClick={() => onPageChange(page - 1)}
+          disabled={!canGoPrevious}
+          className="inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+          aria-label="Go to previous page"
+        >
+          Previous
+        </button>
+        {showPageNumbers &&
+          getPageNumbers().map((pageNum, i) =>
+            pageNum === "ellipsis" ? (
+              <span key={`ellipsis-${i}`} className="px-2 text-muted-foreground">
+                ...
+              </span>
+            ) : (
+              <button
+                key={pageNum}
+                onClick={() => onPageChange(pageNum)}
+                className={cn(
+                  "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium transition-colors",
+                  pageNum === page
+                    ? "bg-primary text-primary-foreground"
+                    : "hover:bg-accent hover:text-accent-foreground"
+                )}
+                aria-label={`Go to page ${pageNum}`}
+                aria-current={pageNum === page ? "page" : undefined}
+              >
+                {pageNum}
+              </button>
+            )
+          )}
+        <button
+          onClick={() => onPageChange(page + 1)}
+          disabled={!canGoNext}
+          className="inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+          aria-label="Go to next page"
+        >
+          Next
+        </button>
+      </div>
+    </nav>
+  )
+}

package/registry/blocks/data-table/index.ts

@@ -0,0 +1,7 @@
+export {
+  DataTable,
+  Pagination,
+  type Column,
+  type DataTableProps,
+  type PaginationProps,
+} from "./DataTable"