@smicolon/fasla-ui 0.2.2

package/registry/blocks/page-header/PageHeader.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Page title */
+  title: string
+  /** Optional description below the title */
+  description?: string
+  /** Action buttons/controls on the right side */
+  actions?: React.ReactNode
+  /** Breadcrumb navigation above the title */
+  breadcrumb?: React.ReactNode
+  /** Whether to show the bottom border */
+  bordered?: boolean
+  /** Semantic heading level for the title */
+  headingLevel?: 1 | 2 | 3
+}
+
+/**
+ * Page header with title, breadcrumb, description, and actions.
+ * Use at the top of page content to provide context and primary actions.
+ */
+export function PageHeader({
+  title,
+  description,
+  actions,
+  breadcrumb,
+  bordered = true,
+  headingLevel = 1,
+  className,
+  ...props
+}: PageHeaderProps) {
+  const Heading = `h${headingLevel}` as const
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-3 bg-background px-4 py-4 md:px-6",
+        bordered && "border-b",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          {breadcrumb && (
+            <nav className="mb-2 text-sm text-muted-foreground" aria-label="Breadcrumb">
+              {breadcrumb}
+            </nav>
+          )}
+          <Heading className="truncate text-xl font-semibold tracking-tight md:text-2xl">
+            {title}
+          </Heading>
+          {description && (
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          )}
+        </div>
+        {actions && (
+          <div className="flex shrink-0 items-center gap-2">{actions}</div>
+        )}
+      </div>
+    </div>
+  )
+}

package/registry/blocks/page-header/index.ts

@@ -0,0 +1 @@
+export { PageHeader, type PageHeaderProps } from "./PageHeader"

package/registry/blocks/sidebar/Sidebar.tsx

@@ -0,0 +1,202 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+  /** Whether the sidebar is collapsed */
+  collapsed?: boolean
+  /** Called when collapse state changes */
+  onCollapsedChange?: (collapsed: boolean) => void
+  /** Sidebar width when expanded */
+  width?: "sm" | "default" | "lg"
+  children: React.ReactNode
+}
+
+const widthClasses = {
+  sm: "w-56",
+  default: "w-64",
+  lg: "w-72",
+}
+
+export function Sidebar({
+  collapsed = false,
+  onCollapsedChange,
+  width = "default",
+  className,
+  children,
+  ...props
+}: SidebarProps) {
+  return (
+    <aside
+      className={cn(
+        "flex h-full flex-col border-r bg-background transition-all duration-200",
+        collapsed ? "w-16" : widthClasses[width],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </aside>
+  )
+}
+
+export interface SidebarHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+}
+
+export function SidebarHeader({
+  className,
+  children,
+  ...props
+}: SidebarHeaderProps) {
+  return (
+    <div
+      className={cn("flex h-14 items-center border-b px-4", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface SidebarContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+}
+
+export function SidebarContent({
+  className,
+  children,
+  ...props
+}: SidebarContentProps) {
+  return (
+    <div
+      className={cn("flex-1 overflow-auto p-2", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface SidebarFooterProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+}
+
+export function SidebarFooter({
+  className,
+  children,
+  ...props
+}: SidebarFooterProps) {
+  return (
+    <div
+      className={cn("border-t p-2", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Group label */
+  label?: string
+  children: React.ReactNode
+}
+
+export function SidebarGroup({
+  label,
+  className,
+  children,
+  ...props
+}: SidebarGroupProps) {
+  return (
+    <div className={cn("py-2", className)} {...props}>
+      {label && (
+        <div className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          {label}
+        </div>
+      )}
+      <div className="space-y-1">{children}</div>
+    </div>
+  )
+}
+
+export interface SidebarItemProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Icon element */
+  icon?: React.ReactNode
+  /** Whether item is active */
+  active?: boolean
+  /** Whether sidebar is collapsed (hides label) */
+  collapsed?: boolean
+  children: React.ReactNode
+}
+
+export function SidebarItem({
+  icon,
+  active,
+  collapsed,
+  className,
+  children,
+  ...props
+}: SidebarItemProps) {
+  return (
+    <button
+      className={cn(
+        "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+        "hover:bg-accent hover:text-accent-foreground",
+        active && "bg-accent text-accent-foreground",
+        collapsed && "justify-center px-2",
+        className
+      )}
+      {...props}
+    >
+      {icon && <span className="shrink-0">{icon}</span>}
+      {!collapsed && <span className="truncate">{children}</span>}
+    </button>
+  )
+}
+
+export interface SidebarCollapseButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  collapsed: boolean
+  onCollapsedChange: (collapsed: boolean) => void
+}
+
+export function SidebarCollapseButton({
+  collapsed,
+  onCollapsedChange,
+  className,
+  ...props
+}: SidebarCollapseButtonProps) {
+  return (
+    <button
+      onClick={() => onCollapsedChange(!collapsed)}
+      className={cn(
+        "flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
+        className
+      )}
+      aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+      {...props}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn("transition-transform", collapsed && "rotate-180")}
+      >
+        <polyline points="11 17 6 12 11 7" />
+        <polyline points="18 17 13 12 18 7" />
+      </svg>
+    </button>
+  )
+}

package/registry/blocks/sidebar/index.ts

@@ -0,0 +1,16 @@
+export {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarItem,
+  SidebarCollapseButton,
+  type SidebarProps,
+  type SidebarHeaderProps,
+  type SidebarContentProps,
+  type SidebarFooterProps,
+  type SidebarGroupProps,
+  type SidebarItemProps,
+  type SidebarCollapseButtonProps,
+} from "./Sidebar"

package/registry/blocks/stats-card/StatsCard.tsx

@@ -0,0 +1,134 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The main title/label */
+  title: string
+  /** The primary value to display */
+  value: string | number
+  /** Optional description or subtitle */
+  description?: string
+  /** Optional icon */
+  icon?: React.ReactNode
+  /** Trend direction and value */
+  trend?: {
+    value: number
+    direction: "up" | "down" | "neutral"
+  }
+  /** Whether the card is loading */
+  loading?: boolean
+}
+
+export function StatsCard({
+  title,
+  value,
+  description,
+  icon,
+  trend,
+  loading = false,
+  className,
+  ...props
+}: StatsCardProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-xl border bg-card p-6 shadow-sm",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-start justify-between">
+        <div className="space-y-1">
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          {loading ? (
+            <div className="h-8 w-24 animate-pulse rounded bg-muted" />
+          ) : (
+            <p className="text-2xl font-bold tracking-tight">{value}</p>
+          )}
+        </div>
+        {icon && (
+          <div className="rounded-md bg-primary/10 p-2 text-primary">
+            {icon}
+          </div>
+        )}
+      </div>
+
+      {(description || trend) && (
+        <div className="mt-4 flex items-center gap-2 text-sm">
+          {trend && (
+            <span
+              className={cn(
+                "inline-flex items-center gap-1 font-medium",
+                trend.direction === "up" && "text-green-600 dark:text-green-400",
+                trend.direction === "down" && "text-red-600 dark:text-red-400",
+                trend.direction === "neutral" && "text-muted-foreground"
+              )}
+            >
+              {trend.direction === "up" && (
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="18 15 12 9 6 15" />
+                </svg>
+              )}
+              {trend.direction === "down" && (
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="6 9 12 15 18 9" />
+                </svg>
+              )}
+              {trend.value > 0 ? "+" : ""}
+              {trend.value}%
+            </span>
+          )}
+          {description && (
+            <span className="text-muted-foreground">{description}</span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export interface StatsGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Number of columns */
+  columns?: 2 | 3 | 4
+  children: React.ReactNode
+}
+
+export function StatsGrid({
+  columns = 4,
+  className,
+  children,
+  ...props
+}: StatsGridProps) {
+  return (
+    <div
+      className={cn(
+        "grid gap-4",
+        columns === 2 && "grid-cols-1 sm:grid-cols-2",
+        columns === 3 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        columns === 4 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/registry/blocks/stats-card/index.ts

@@ -0,0 +1,6 @@
+export {
+  StatsCard,
+  StatsGrid,
+  type StatsCardProps,
+  type StatsGridProps,
+} from "./StatsCard"

package/registry/effects/animated-gradient/animated-gradient.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { motion, useReducedMotion } from "framer-motion"
+import { cn } from "../../../src/lib/utils"
+
+export interface AnimatedGradientProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Gradient colors */
+  colors?: string[]
+  /** Animation speed in seconds */
+  speed?: number
+  /** Blur amount */
+  blur?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+}
+
+const blurValues = {
+  sm: "blur-sm",
+  md: "blur-md",
+  lg: "blur-lg",
+  xl: "blur-xl",
+  "2xl": "blur-2xl",
+  "3xl": "blur-3xl",
+}
+
+/**
+ * Animated gradient background with moving color blobs.
+ * Respects prefers-reduced-motion by stopping animation.
+ */
+export function AnimatedGradient({
+  colors = [
+    "hsl(var(--primary))",
+    "hsl(var(--secondary))",
+    "hsl(280 100% 70%)",
+    "hsl(200 100% 70%)",
+  ],
+  speed = 10,
+  blur = "3xl",
+  className,
+  children,
+  ...props
+}: AnimatedGradientProps) {
+  const prefersReducedMotion = useReducedMotion()
+
+  return (
+    <div
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      {/* Gradient blobs */}
+      <div className="absolute inset-0 -z-10">
+        {colors.map((color, i) => (
+          <motion.div
+            key={i}
+            className={cn(
+              "absolute h-[50%] w-[50%] rounded-full opacity-60",
+              blurValues[blur]
+            )}
+            style={{
+              background: color,
+              left: `${(i % 2) * 50}%`,
+              top: `${Math.floor(i / 2) * 50}%`,
+            }}
+            animate={
+              prefersReducedMotion
+                ? {}
+                : {
+                    x: [0, 30, -20, 0],
+                    y: [0, -30, 20, 0],
+                    scale: [1, 1.1, 0.9, 1],
+                  }
+            }
+            transition={{
+              duration: speed + i * 2,
+              repeat: Infinity,
+              ease: "easeInOut",
+            }}
+          />
+        ))}
+      </div>
+
+      {/* Content */}
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Animated gradient text effect.
+ */
+export interface AnimatedGradientTextProps {
+  /** Gradient colors for text */
+  colors?: string[]
+  /** Animation speed in seconds */
+  speed?: number
+  /** Additional class names */
+  className?: string
+  /** Text content */
+  children: React.ReactNode
+}
+
+export function AnimatedGradientText({
+  colors = ["hsl(var(--primary))", "hsl(280 100% 70%)", "hsl(var(--primary))"],
+  speed = 3,
+  className,
+  children,
+}: AnimatedGradientTextProps) {
+  const prefersReducedMotion = useReducedMotion()
+
+  return (
+    <motion.span
+      className={cn(
+        "inline-block bg-clip-text text-transparent",
+        className
+      )}
+      style={{
+        backgroundImage: `linear-gradient(90deg, ${colors.join(", ")})`,
+        backgroundSize: "200% auto",
+      }}
+      animate={
+        prefersReducedMotion
+          ? {}
+          : {
+              backgroundPosition: ["0% center", "200% center"],
+            }
+      }
+      transition={{
+        duration: speed,
+        repeat: Infinity,
+        ease: "linear",
+      }}
+    >
+      {children}
+    </motion.span>
+  )
+}

package/registry/effects/animated-gradient/index.ts

@@ -0,0 +1,6 @@
+export {
+  AnimatedGradient,
+  AnimatedGradientText,
+  type AnimatedGradientProps,
+  type AnimatedGradientTextProps,
+} from "./animated-gradient"

package/registry/effects/border-beam/border-beam.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { motion, useReducedMotion } from "framer-motion"
+import { cn } from "../../../src/lib/utils"
+
+export interface BorderBeamProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Duration of the animation in seconds */
+  duration?: number
+  /** Border width */
+  borderWidth?: number
+  /** Color of the beam */
+  colorFrom?: string
+  /** End color of the beam */
+  colorTo?: string
+  /** Delay before animation starts */
+  delay?: number
+}
+
+/**
+ * Animated border beam effect that travels around the element.
+ * Respects prefers-reduced-motion.
+ */
+export function BorderBeam({
+  duration = 4,
+  borderWidth = 2,
+  colorFrom = "hsl(var(--primary))",
+  colorTo = "transparent",
+  delay = 0,
+  className,
+  children,
+  ...props
+}: BorderBeamProps) {
+  const prefersReducedMotion = useReducedMotion()
+
+  return (
+    <div
+      className={cn("relative overflow-hidden rounded-lg", className)}
+      {...props}
+    >
+      {/* Border beam */}
+      {!prefersReducedMotion && (
+        <motion.div
+          className="pointer-events-none absolute inset-0 rounded-[inherit]"
+          style={{
+            padding: borderWidth,
+            background: `linear-gradient(90deg, ${colorFrom}, ${colorTo})`,
+            mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+            maskComposite: "exclude",
+            WebkitMaskComposite: "xor",
+          }}
+          animate={{
+            rotate: [0, 360],
+          }}
+          transition={{
+            duration,
+            delay,
+            repeat: Infinity,
+            ease: "linear",
+          }}
+        />
+      )}
+
+      {/* Static border fallback for reduced motion */}
+      {prefersReducedMotion && (
+        <div
+          className="pointer-events-none absolute inset-0 rounded-[inherit]"
+          style={{
+            padding: borderWidth,
+            background: colorFrom,
+            mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+            maskComposite: "exclude",
+            WebkitMaskComposite: "xor",
+            opacity: 0.5,
+          }}
+        />
+      )}
+
+      {/* Content */}
+      <div className="relative z-10 rounded-[inherit] bg-background">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export interface GlowingBorderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Glow color */
+  glowColor?: string
+  /** Border radius */
+  borderRadius?: string
+  /** Glow intensity */
+  intensity?: "sm" | "md" | "lg"
+}
+
+const intensityValues = {
+  sm: "0 0 10px 2px",
+  md: "0 0 20px 4px",
+  lg: "0 0 30px 6px",
+}
+
+/**
+ * Static glowing border effect.
+ */
+export function GlowingBorder({
+  glowColor = "hsl(var(--primary) / 0.5)",
+  borderRadius = "0.5rem",
+  intensity = "md",
+  className,
+  children,
+  ...props
+}: GlowingBorderProps) {
+  return (
+    <div
+      className={cn("relative", className)}
+      style={{
+        borderRadius,
+      }}
+      {...props}
+    >
+      {/* Glow */}
+      <div
+        className="absolute inset-0 -z-10"
+        style={{
+          borderRadius,
+          boxShadow: `${intensityValues[intensity]} ${glowColor}`,
+        }}
+      />
+      {children}
+    </div>
+  )
+}

package/registry/effects/border-beam/index.ts

@@ -0,0 +1,6 @@
+export {
+  BorderBeam,
+  GlowingBorder,
+  type BorderBeamProps,
+  type GlowingBorderProps,
+} from "./border-beam"