@reinvented/design 0.3.0 → 1.0.0

package/src/components/blocks/feedback/error-state/ErrorState.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { AlertTriangle, RefreshCcw } from 'lucide-react'
+
+interface ErrorStateProps {
+  title?: string
+  description?: string
+  retryLabel?: string
+  className?: string
+  onRetry?: () => void
+}
+
+export function ErrorState({
+  title,
+  description,
+  retryLabel,
+  className,
+  onRetry,
+}: ErrorStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center py-12 px-6 text-center bg-rose-500/5 border border-rose-500/20 rounded-xl',
+        className,
+      )}
+    >
+      <div className="h-12 w-12 rounded-full bg-rose-500/10 flex items-center justify-center mb-4 text-rose-500">
+        <AlertTriangle className="h-6 w-6" />
+      </div>
+
+      <h3 className="text-lg font-semibold text-foreground mb-1">
+        {title || 'Something went wrong'}
+      </h3>
+      <p className="text-sm text-muted-foreground max-w-md mx-auto mb-6">
+        {description ||
+          'An unexpected error occurred while trying to load this content. Please try again later.'}
+      </p>
+
+      <Button
+        variant="outline"
+        onClick={onRetry}
+        className="border-rose-500/20 hover:bg-rose-500/10 hover:text-rose-600 text-rose-600"
+      >
+        <RefreshCcw className="mr-2 h-4 w-4" />
+        {retryLabel || 'Try again'}
+      </Button>
+    </div>
+  )
+}

package/src/components/blocks/feedback/error-state/index.ts

@@ -0,0 +1 @@
+export * from './ErrorState'

package/src/components/blocks/feedback/index.ts

@@ -0,0 +1,3 @@
+export * from './empty-state'
+export * from './error-state'
+export * from './not-found'

package/src/components/blocks/feedback/not-found/NotFoundState.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Search, Home, ArrowLeft } from 'lucide-react'
+
+interface NotFoundStateProps {
+  title?: string
+  description?: string
+  className?: string
+  onBack?: () => void
+  onHome?: () => void
+}
+
+export function NotFoundState({
+  title,
+  description,
+  className,
+  onBack,
+  onHome,
+}: NotFoundStateProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center py-20 px-6 text-center', className)}>
+      <div className="relative mb-6">
+        <h1 className="text-7xl sm:text-9xl font-extrabold tracking-tighter text-muted select-none">404</h1>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Search className="h-10 w-10 sm:h-12 sm:w-12 text-muted-foreground/50" />
+        </div>
+      </div>
+
+      <h3 className="text-2xl font-bold text-foreground mb-2">{title || 'Page not found'}</h3>
+      <p className="text-base text-muted-foreground max-w-md mx-auto mb-8">
+        {description || "Sorry, we couldn't find the page you're looking for. It might have been moved or deleted."}
+      </p>
+
+      <div className="flex items-center gap-3">
+        <Button variant="outline" onClick={onBack}>
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Go back
+        </Button>
+        <Button onClick={onHome}>
+          <Home className="mr-2 h-4 w-4" />
+          Back to home
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/feedback/not-found/index.ts

@@ -0,0 +1 @@
+export * from './NotFoundState'

package/src/components/blocks/filtering/faceted-sidebar/FacetedGroup.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { cn } from '@/lib/utils'
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
+import { ChevronDown } from 'lucide-react'
+
+interface FacetedGroupProps {
+  title: string
+  defaultExpanded?: boolean
+  className?: string
+  children?: React.ReactNode
+}
+
+export function FacetedGroup({ title, defaultExpanded = true, className, children }: FacetedGroupProps) {
+  const [isOpen, setIsOpen] = useState(defaultExpanded)
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen} className={cn('w-full', className)}>
+      <CollapsibleTrigger className="flex items-center justify-between w-full py-2 hover:bg-muted/50 rounded-md transition-colors group">
+        <h4 className="text-sm font-semibold tracking-tight">{title}</h4>
+        <ChevronDown
+          className={cn(
+            'h-4 w-4 text-muted-foreground transition-transform duration-200',
+            isOpen ? 'rotate-180' : 'rotate-0'
+          )}
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent className="pt-3 pb-1 space-y-3">
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}

package/src/components/blocks/filtering/faceted-sidebar/FacetedSidebar.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { ScrollArea } from '@/components/ui/scroll-area'
+
+interface FacetedSidebarProps {
+  title?: string
+  className?: string
+  children?: React.ReactNode
+}
+
+export function FacetedSidebar({ title, className, children }: FacetedSidebarProps) {
+  return (
+    <div className={cn('w-full md:w-64 shrink-0 flex flex-col pt-1', className)}>
+      {title && (
+        <div className="mb-4">
+          <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">{title}</h3>
+        </div>
+      )}
+      <ScrollArea className="h-[calc(100vh-12rem)] pr-4">
+        <div className="flex flex-col gap-6 pb-6 w-full">
+          {children}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}

package/src/components/blocks/filtering/faceted-sidebar/index.ts

@@ -0,0 +1,2 @@
+export * from './FacetedSidebar'
+export * from './FacetedGroup'

package/src/components/blocks/filtering/filter-bar/FilterBar.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Search, Filter, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface FilterBarProps {
+  placeholder?: string
+  activeFilters?: { key: string; label: string }[]
+  resultsCount?: number
+  className?: string
+  controls?: React.ReactNode
+  onRemoveFilter?: (filter: { key: string; label: string }) => void
+  onClearFilters?: () => void
+}
+
+export function FilterBar({
+  placeholder,
+  activeFilters,
+  resultsCount,
+  className,
+  controls,
+  onRemoveFilter,
+  onClearFilters,
+}: FilterBarProps) {
+  return (
+    <div className={cn('flex flex-col gap-4 w-full', className)}>
+      <div className="flex flex-col sm:flex-row items-center gap-3">
+        <div className="relative w-full flex-1">
+          <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder={placeholder || 'Search...'}
+            className="w-full pl-9 bg-background border-muted-foreground/20 shadow-sm"
+          />
+        </div>
+        <div className="flex items-center gap-2 w-full sm:w-auto">
+          {controls !== undefined ? (
+            controls
+          ) : (
+            <Button variant="outline" className="w-full sm:w-auto shadow-sm">
+              <Filter className="mr-2 h-4 w-4" />
+              Filters
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {activeFilters && activeFilters.length > 0 && (
+        <div className="flex items-center flex-wrap gap-2 text-sm">
+          <span className="text-muted-foreground mr-1 text-xs font-medium">Active filters:</span>
+          {activeFilters.map((filter) => (
+            <Badge
+              key={filter.key}
+              variant="secondary"
+              className="gap-1 pr-1 font-normal bg-primary/10 text-primary hover:bg-primary/20 border-transparent"
+            >
+              {filter.label}
+              <div
+                className="h-3.5 w-3.5 rounded-full hover:bg-primary/30 flex items-center justify-center cursor-pointer transition-colors"
+                onClick={() => onRemoveFilter?.(filter)}
+              >
+                <X className="h-2.5 w-2.5" />
+              </div>
+            </Badge>
+          ))}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50"
+            onClick={() => onClearFilters?.()}
+          >
+            Clear all
+          </Button>
+        </div>
+      )}
+
+      {resultsCount !== undefined && (
+        <div className="text-xs text-muted-foreground">
+          Showing <span className="font-medium text-foreground">{resultsCount}</span> results
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/blocks/filtering/filter-bar/index.ts

@@ -0,0 +1 @@
+export * from './FilterBar'

package/src/components/blocks/filtering/index.ts

@@ -0,0 +1,3 @@
+export * from './filter-bar'
+export * from './faceted-sidebar'
+export * from './search-result'

package/src/components/blocks/filtering/search-result/SearchResultItem.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+
+interface SearchResultItemProps {
+  title: string
+  subtitle?: string
+  description?: string
+  tag?: string
+  url?: string
+  image?: string
+  className?: string
+  meta?: React.ReactNode
+}
+
+export function SearchResultItem({
+  title,
+  subtitle,
+  description,
+  tag,
+  url,
+  image,
+  className,
+  meta,
+}: SearchResultItemProps) {
+  return (
+    <div className={cn('flex py-4 md:py-5 border-b last:border-0 group', className)}>
+      {image && (
+        <div className="shrink-0 mr-4 md:mr-6 h-20 w-20 sm:h-24 sm:w-24 border rounded-md overflow-hidden bg-muted">
+          <img
+            src={image}
+            className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col flex-1 min-w-0">
+        <div className="flex items-start justify-between gap-4 mb-1">
+          <a
+            href={url || '#'}
+            className="text-lg font-medium text-primary hover:underline underline-offset-4 truncate"
+          >
+            {title}
+          </a>
+          {tag && (
+            <Badge variant="outline" className="shrink-0 text-[10px] uppercase font-mono">
+              {tag}
+            </Badge>
+          )}
+        </div>
+
+        {(subtitle || url) && (
+          <div className="text-xs font-mono text-muted-foreground mb-2 flex items-center gap-1.5 align-middle truncate">
+            <span>{url ? url : subtitle}</span>
+          </div>
+        )}
+
+        {description && (
+          <p className="text-sm text-foreground/80 line-clamp-2 md:line-clamp-3 leading-relaxed">
+            {description}
+          </p>
+        )}
+
+        <div className="mt-3 flex items-center gap-4 text-xs text-muted-foreground">
+          {meta}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/filtering/search-result/index.ts

@@ -0,0 +1 @@
+export * from './SearchResultItem'

package/src/components/blocks/index.ts

@@ -0,0 +1,21 @@
+// ── @reinvented/design/blocks — Blocks Barrel Export ──────────────
+// This file re-exports all composite Block components from the design system.
+
+// As blocks are generated via the `/build-block` workflow, they should be exported here.
+// e.g., export * from './communication'
+
+export * from './communication'
+export * from './media'
+export * from './ecommerce'
+export * from './content'
+export * from './data-viz'
+export * from './data-management'
+export * from './auth'
+export * from './profiles'
+export * from './settings'
+export * from './onboarding'
+export * from './feedback'
+export * from './filtering'
+export * from './scheduling'
+export * from './navigation'
+export * from './marketing'

package/src/components/blocks/marketing/cta-block/CtaBlock.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { ArrowRight } from 'lucide-react'
+
+interface CtaBlockProps {
+  title: string
+  description?: string
+  primaryAction?: string
+  secondaryAction?: string
+  className?: string
+  onPrimary?: () => void
+  onSecondary?: () => void
+}
+
+export function CtaBlock({
+  title,
+  description,
+  primaryAction,
+  secondaryAction,
+  className,
+  onPrimary,
+  onSecondary,
+}: CtaBlockProps) {
+  return (
+    <section
+      className={cn(
+        'w-full py-20 lg:py-24 px-4 md:px-6 relative overflow-hidden rounded-3xl bg-primary text-primary-foreground shadow-xl',
+        className
+      )}
+    >
+      {/* Ambient background patterns */}
+      <div className="absolute right-0 top-0 -translate-y-12 translate-x-1/3 opacity-10 pointer-events-none">
+        <svg width="400" height="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill="currentColor"
+            d="M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-45.8C87.4,-32.6,90,-16.3,89.1,-0.5C88.1,15.3,83.5,30.6,74.2,42.5C64.9,54.4,50.9,62.9,36.5,69.5C22.1,76.1,7.3,80.8,-7.4,81.3C-22,81.8,-36.5,78,-50.7,71.4C-64.8,64.9,-78.6,55.5,-86.3,42.1C-93.9,28.6,-95.4,11.3,-91.9,-4.5C-88.5,-20.3,-80.2,-34.5,-69.3,-45C-58.4,-55.5,-44.9,-62.3,-31.6,-69.8C-18.3,-77.3,-5.1,-85.5,5.1,-85C15.3,-84.4,30.6,-83.5,44.7,-76.4Z"
+            transform="translate(100 100)"
+          />
+        </svg>
+      </div>
+
+      <div className="relative z-10 flex flex-col items-center text-center max-w-3xl mx-auto">
+        <h2 className="text-3xl md:text-5xl font-bold tracking-tight mb-6">
+          {title}
+        </h2>
+
+        {description && (
+          <p className="text-lg md:text-xl text-primary-foreground/80 mb-10 leading-relaxed">
+            {description}
+          </p>
+        )}
+
+        <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
+          {primaryAction && (
+            <Button
+              size="lg"
+              variant="secondary"
+              className="h-12 px-8 text-base font-semibold w-full sm:w-auto shadow-sm"
+              onClick={onPrimary}
+            >
+              {primaryAction}
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          )}
+          {secondaryAction && (
+            <Button
+              size="lg"
+              variant="outline"
+              className="h-12 px-8 text-base font-semibold w-full sm:w-auto border-primary-foreground/30 bg-primary-foreground/5 text-primary-foreground hover:bg-primary-foreground/20 hover:text-primary-foreground backdrop-blur"
+              onClick={onSecondary}
+            >
+              {secondaryAction}
+            </Button>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/blocks/marketing/cta-block/index.ts

@@ -0,0 +1 @@
+export * from './CtaBlock'

package/src/components/blocks/marketing/feature-grid/FeatureGrid.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface Feature {
+  title: string
+  description: string
+  icon?: React.ComponentType<{ className?: string }>
+}
+
+interface FeatureGridProps {
+  features: Feature[]
+  columns?: 2 | 3 | 4
+  className?: string
+}
+
+export function FeatureGrid({ features, columns, className }: FeatureGridProps) {
+  return (
+    <div
+      className={cn(
+        'grid gap-8 sm:gap-12 w-full',
+        columns === 2
+          ? 'grid-cols-1 md:grid-cols-2'
+          : columns === 4
+            ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
+            : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+        className
+      )}
+    >
+      {features.map((feature) => {
+        const Icon = feature.icon
+        return (
+          <div key={feature.title} className="flex flex-col">
+            <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-6 text-primary">
+              {Icon ? (
+                <Icon className="h-6 w-6" />
+              ) : (
+                <div className="h-6 w-6 bg-primary/40 rounded-sm rotate-3 transform transition-transform group-hover:rotate-12" />
+              )}
+            </div>
+            <h3 className="text-xl font-bold mb-3 tracking-tight">{feature.title}</h3>
+            <p className="text-muted-foreground leading-relaxed">{feature.description}</p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/blocks/marketing/feature-grid/index.ts

@@ -0,0 +1 @@
+export * from './FeatureGrid'

package/src/components/blocks/marketing/hero-section/HeroSection.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { ArrowRight } from 'lucide-react'
+
+interface HeroSectionProps {
+  badge?: string
+  title: string
+  description?: string
+  primaryAction?: string
+  secondaryAction?: string
+  image?: string
+  className?: string
+  onPrimary?: () => void
+  onSecondary?: () => void
+}
+
+export function HeroSection({
+  badge,
+  title,
+  description,
+  primaryAction,
+  secondaryAction,
+  image,
+  className,
+  onPrimary,
+  onSecondary,
+}: HeroSectionProps) {
+  return (
+    <section className={cn('relative overflow-hidden py-24 lg:py-32', className)}>
+      <div className="container mx-auto px-4 md:px-6 relative z-10 flex flex-col items-center text-center">
+        {badge && (
+          <Badge
+            variant="secondary"
+            className="mb-6 rounded-full px-4 py-1.5 text-sm font-medium border-primary/20 bg-primary/10 text-primary"
+          >
+            {badge}
+          </Badge>
+        )}
+
+        <h1 className="max-w-4xl text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl mb-6 leading-[1.1]">
+          {title}
+        </h1>
+
+        {description && (
+          <p className="max-w-2xl text-lg sm:text-xl text-muted-foreground mb-10 leading-relaxed">
+            {description}
+          </p>
+        )}
+
+        <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto mt-2">
+          {primaryAction && (
+            <Button
+              size="lg"
+              className="h-12 px-8 text-base font-semibold w-full sm:w-auto"
+              onClick={onPrimary}
+            >
+              {primaryAction}
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          )}
+          {secondaryAction && (
+            <Button
+              size="lg"
+              variant="outline"
+              className="h-12 px-8 text-base font-semibold w-full sm:w-auto bg-background/50 backdrop-blur"
+              onClick={onSecondary}
+            >
+              {secondaryAction}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {image && (
+        <div className="w-full max-w-6xl mx-auto mt-16 px-4 md:px-6 relative z-10 hidden sm:block">
+          <div className="rounded-xl border shadow-2xl overflow-hidden bg-muted">
+            <img src={image} className="w-full h-auto object-cover" />
+          </div>
+        </div>
+      )}
+
+      {/* Abstract Background Elements */}
+      <div className="absolute inset-0 -z-10 h-full w-full bg-background bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
+      <div className="absolute left-0 right-0 top-0 -z-10 m-auto h-[310px] w-[310px] rounded-full bg-primary opacity-20 blur-[100px]"></div>
+    </section>
+  )
+}

package/src/components/blocks/marketing/hero-section/index.ts

@@ -0,0 +1 @@
+export * from './HeroSection'

package/src/components/blocks/marketing/index.ts

@@ -0,0 +1,4 @@
+export * from './hero-section'
+export * from './feature-grid'
+export * from './testimonial-card'
+export * from './cta-block'

package/src/components/blocks/marketing/testimonial-card/TestimonialCard.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Star } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface TestimonialCardProps {
+  quote: string
+  name: string
+  role?: string
+  company?: string
+  avatar?: string
+  rating?: number
+  className?: string
+}
+
+export function TestimonialCard({
+  quote,
+  name,
+  role,
+  company,
+  avatar,
+  rating,
+  className,
+}: TestimonialCardProps) {
+  return (
+    <Card
+      className={cn(
+        'overflow-hidden h-full border-none shadow-md bg-muted/30 hover:bg-muted/50 transition-colors duration-300',
+        className,
+      )}
+    >
+      <CardContent className="p-8 flex flex-col h-full">
+        {rating != null && (
+          <div className="flex items-center gap-1 mb-6 text-yellow-500">
+            {[1, 2, 3, 4, 5].map((i) => (
+              <Star
+                key={i}
+                className="h-4 w-4"
+                fill={i <= rating ? 'currentColor' : 'transparent'}
+              />
+            ))}
+          </div>
+        )}
+
+        <blockquote className="text-lg md:text-xl text-foreground font-medium mb-8 flex-1 leading-snug">
+          &ldquo;{quote}&rdquo;
+        </blockquote>
+
+        <div className="flex items-center gap-4 mt-auto">
+          <Avatar className="h-12 w-12 border-2 border-background shadow-sm">
+            {avatar && <AvatarImage src={avatar} />}
+            <AvatarFallback className="bg-primary/5 text-primary font-bold">
+              {name.substring(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col">
+            <span className="font-bold text-base leading-none">{name}</span>
+            {(role || company) && (
+              <span className="text-sm text-muted-foreground mt-1.5 leading-none">
+                {role}
+                {role && company && ', '}
+                {company}
+              </span>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/blocks/marketing/testimonial-card/index.ts

@@ -0,0 +1 @@
+export * from './TestimonialCard'