@reinvented/design 0.3.0 → 1.0.0

package/src/components/blocks/data-management/kanban/KanbanCard.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { MessageSquare, Paperclip } from 'lucide-react'
+
+interface KanbanCardProps {
+  title: string
+  id?: string
+  priority?: 'low' | 'medium' | 'high'
+  labels?: string[]
+  assignee?: { name: string; avatar?: string }
+  comments?: number
+  attachments?: number
+  className?: string
+}
+
+export function KanbanCard({
+  title,
+  id,
+  priority,
+  labels,
+  assignee,
+  comments,
+  attachments,
+  className,
+}: KanbanCardProps) {
+  return (
+    <Card
+      className={cn(
+        'cursor-grab active:cursor-grabbing hover:ring-1 hover:ring-primary/50 transition-all shadow-sm',
+        className,
+      )}
+    >
+      <CardContent className="p-3">
+        {(labels?.length || priority) && (
+          <div className="flex flex-wrap gap-1.5 mb-2">
+            {priority && (
+              <Badge
+                variant={
+                  priority === 'high'
+                    ? 'destructive'
+                    : priority === 'medium'
+                      ? 'default'
+                      : 'secondary'
+                }
+                className="text-[10px] h-4 px-1 leading-none uppercase"
+              >
+                {priority}
+              </Badge>
+            )}
+            {labels?.map((label) => (
+              <Badge
+                key={label}
+                variant="outline"
+                className="text-[10px] h-4 px-1 leading-none bg-background"
+              >
+                {label}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        <p className="text-sm font-medium leading-tight mb-3">
+          {id && (
+            <span className="text-xs text-muted-foreground font-mono mr-1.5">
+              {id}
+            </span>
+          )}
+          {title}
+        </p>
+
+        <div className="flex items-center justify-between mt-auto pt-2 border-t text-muted-foreground text-xs">
+          <div className="flex items-center gap-3">
+            {!!comments && (
+              <div className="flex items-center gap-1">
+                <MessageSquare className="h-3.5 w-3.5" />
+                <span className="tabular-nums font-medium">{comments}</span>
+              </div>
+            )}
+            {!!attachments && (
+              <div className="flex items-center gap-1">
+                <Paperclip className="h-3.5 w-3.5" />
+                <span className="tabular-nums font-medium">{attachments}</span>
+              </div>
+            )}
+          </div>
+
+          {assignee && (
+            <Avatar className="h-6 w-6">
+              {assignee.avatar && <AvatarImage src={assignee.avatar} />}
+              <AvatarFallback className="text-[10px]">
+                {assignee.name.substring(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/blocks/data-management/kanban/KanbanColumn.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { MoreHorizontal, Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+interface KanbanColumnProps {
+  title: string
+  count?: number
+  className?: string
+  children?: React.ReactNode
+}
+
+export function KanbanColumn({ title, count, className, children }: KanbanColumnProps) {
+  return (
+    <div className={cn('flex flex-col gap-3 min-w-[300px] w-[300px] max-w-[300px] shrink-0', className)}>
+      <div className="flex items-center justify-between mb-2 px-1">
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold text-sm">{title}</h3>
+          {count !== undefined && (
+            <Badge variant="secondary" className="h-5 px-1.5 text-xs font-mono tabular-nums">
+              {count}
+            </Badge>
+          )}
+        </div>
+        <div className="flex items-center gap-1 text-muted-foreground">
+          <Button variant="ghost" size="icon" className="h-6 w-6 rounded-md">
+            <Plus className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon" className="h-6 w-6 rounded-md">
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-3 flex-1 bg-muted/50 p-2 rounded-lg border border-transparent hover:border-border transition-colors">
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/data-management/kanban/index.ts

@@ -0,0 +1,3 @@
+export * from './KanbanBoard'
+export * from './KanbanColumn'
+export * from './KanbanCard'

package/src/components/blocks/data-management/tree-view/TreeItem.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import { ChevronRight, Folder, FolderOpen, File } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+
+interface TreeItemProps {
+  title: string
+  isFolder?: boolean
+  defaultExpanded?: boolean
+  level?: number
+  className?: string
+  children?: React.ReactNode
+}
+
+export function TreeItem({
+  title,
+  isFolder,
+  defaultExpanded,
+  level,
+  className,
+  children,
+}: TreeItemProps) {
+  const [isOpen, setIsOpen] = useState(defaultExpanded ?? false)
+  const nestingLevel = level || 0
+
+  if (isFolder) {
+    return (
+      <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-full">
+        <CollapsibleTrigger asChild>
+          <div
+            className={cn(
+              'flex items-center gap-2 px-3 py-1.5 hover:bg-muted/50 cursor-pointer select-none text-sm transition-colors',
+              className
+            )}
+            style={{ paddingLeft: `${nestingLevel * 16 + 12}px` }}
+          >
+            <ChevronRight
+              className={cn(
+                'h-4 w-4 shrink-0 transition-transform duration-200 text-muted-foreground',
+                isOpen && 'rotate-90'
+              )}
+            />
+            {isOpen ? (
+              <FolderOpen className="h-4 w-4 shrink-0 text-blue-500" />
+            ) : (
+              <Folder className="h-4 w-4 shrink-0 text-blue-400" />
+            )}
+            <span className="truncate">{title}</span>
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>{children}</CollapsibleContent>
+      </Collapsible>
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 px-3 py-1.5 hover:bg-muted/50 cursor-pointer select-none text-sm group transition-colors',
+        className
+      )}
+      style={{ paddingLeft: `${nestingLevel * 16 + 36}px` }}
+    >
+      <File className="h-4 w-4 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+      <span className="truncate">{title}</span>
+    </div>
+  )
+}

package/src/components/blocks/data-management/tree-view/TreeView.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+export function TreeView({ class: className, children }: { class?: string; children?: React.ReactNode }) {
+  return (
+    <div className={cn('flex flex-col border rounded-lg py-2 bg-background', className)}>
+      {children}
+    </div>
+  )
+}

package/src/components/blocks/data-management/tree-view/index.ts

@@ -0,0 +1,2 @@
+export * from './TreeView'
+export * from './TreeItem'

package/src/components/blocks/data-viz/financial-ticker/FinancialTicker.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface FinancialTickerProps {
+  symbol: string
+  price: string
+  change: number
+  changePercent: number
+  className?: string
+}
+
+export function FinancialTicker({ symbol, price, change, changePercent, className }: FinancialTickerProps) {
+  return (
+    <div className={cn('flex items-center gap-2 text-sm font-medium tabular-nums', className)}>
+      <span className="font-bold text-foreground">{symbol}</span>
+      <span className="text-foreground">{price}</span>
+      <span
+        className={cn(
+          'flex gap-1.5 items-center ml-1',
+          change >= 0 ? 'text-emerald-500' : 'text-rose-500'
+        )}
+      >
+        <span>{change > 0 ? '+' : ''}{change}</span>
+        <span
+          className={cn(
+            'text-xs px-1.5 py-0.5 rounded-sm',
+            change >= 0 ? 'bg-emerald-500/10' : 'bg-rose-500/10'
+          )}
+        >
+          {changePercent > 0 ? '+' : ''}{changePercent}%
+        </span>
+      </span>
+    </div>
+  )
+}

package/src/components/blocks/data-viz/financial-ticker/index.ts

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

package/src/components/blocks/data-viz/index.ts

@@ -0,0 +1,3 @@
+export * from './kpi-card'
+export * from './stat-grid'
+export * from './financial-ticker'

package/src/components/blocks/data-viz/kpi-card/KpiCard.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface KpiCardProps {
+  title: string
+  metric: string
+  trend?: number
+  trendLabel?: string
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  className?: string
+  children?: React.ReactNode
+}
+
+export function KpiCard({
+  title,
+  metric,
+  trend,
+  trendLabel,
+  icon: Icon,
+  className,
+  children,
+}: KpiCardProps) {
+  return (
+    <Card className={cn('overflow-hidden', className)}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">
+          {title}
+        </CardTitle>
+        {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{metric}</div>
+        {trend !== undefined && (
+          <p className="text-xs mt-1 flex items-center gap-1">
+            <span
+              className={cn(
+                'flex items-center font-medium',
+                trend > 0 && 'text-emerald-500',
+                trend < 0 && 'text-rose-500',
+                trend === 0 && 'text-muted-foreground',
+              )}
+            >
+              {trend > 0 ? (
+                <TrendingUp className="mr-1 h-3 w-3" />
+              ) : trend < 0 ? (
+                <TrendingDown className="mr-1 h-3 w-3" />
+              ) : (
+                <Minus className="mr-1 h-3 w-3" />
+              )}
+              {Math.abs(trend)}%
+            </span>
+            <span className="text-muted-foreground ml-1">{trendLabel}</span>
+          </p>
+        )}
+      </CardContent>
+      {children}
+    </Card>
+  )
+}

package/src/components/blocks/data-viz/kpi-card/index.ts

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

package/src/components/blocks/data-viz/stat-grid/StatGrid.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface StatGridProps {
+  columns?: 2 | 3 | 4
+  className?: string
+  children?: React.ReactNode
+}
+
+export function StatGrid({ columns, className, children }: StatGridProps) {
+  return (
+    <div
+      className={cn(
+        'grid gap-4 md:gap-8',
+        columns === 2
+          ? 'md:grid-cols-2'
+          : columns === 3
+            ? 'md:grid-cols-3'
+            : columns === 4
+              ? 'md:grid-cols-2 lg:grid-cols-4'
+              : 'md:grid-cols-3', // Default 3
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/blocks/data-viz/stat-grid/index.ts

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

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

@@ -0,0 +1,3 @@
+export * from './product-card'
+export * from './pricing-tier'
+export * from './rating-summary'

package/src/components/blocks/ecommerce/pricing-tier/PricingFeatureList.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import type { HTMLAttributes } from 'react'
+import { CardContent } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-react'
+
+interface PricingFeatureListProps {
+  features: string[]
+  className?: HTMLAttributes<HTMLDivElement>['className']
+  children?: React.ReactNode
+}
+
+export function PricingFeatureList({ features, className, children }: PricingFeatureListProps) {
+  return (
+    <CardContent className={cn('flex-1', className)}>
+      <ul className="space-y-3">
+        {features.map((feature) => (
+          <li key={feature} className="flex items-center gap-3">
+            <Check className="h-4 w-4 text-primary shrink-0" />
+            <span className="text-sm">{feature}</span>
+          </li>
+        ))}
+      </ul>
+      {children}
+    </CardContent>
+  )
+}

package/src/components/blocks/ecommerce/pricing-tier/PricingHeader.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import type { HTMLAttributes } from 'react'
+import { CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+interface PricingHeaderProps {
+  title: string
+  description?: string
+  price: string
+  period?: string
+  className?: HTMLAttributes<HTMLDivElement>['className']
+}
+
+export function PricingHeader({ title, description, price, period, className }: PricingHeaderProps) {
+  return (
+    <CardHeader className={cn('text-center pb-6', className)}>
+      <CardTitle className="text-2xl">{title}</CardTitle>
+      {description && <CardDescription className="mt-2">{description}</CardDescription>}
+      <div className="mt-4 flex items-baseline justify-center gap-1">
+        <span className="text-4xl font-bold tracking-tight">{price}</span>
+        {period && <span className="text-muted-foreground">{period}</span>}
+      </div>
+    </CardHeader>
+  )
+}

package/src/components/blocks/ecommerce/pricing-tier/PricingTier.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import type { HTMLAttributes } from 'react'
+import { Card } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+interface PricingTierProps {
+  featured?: boolean
+  className?: HTMLAttributes<HTMLElement>['className']
+  children?: React.ReactNode
+}
+
+export function PricingTier({ featured, className, children }: PricingTierProps) {
+  return (
+    <Card
+      className={cn(
+        'flex flex-col relative',
+        featured ? 'border-primary shadow-lg scale-105 z-10' : 'border-border',
+        className
+      )}
+    >
+      {featured && (
+        <div className="absolute -top-3 left-0 right-0 flex justify-center">
+          <span className="bg-primary text-primary-foreground text-xs font-medium px-3 py-1 rounded-full uppercase tracking-wider">
+            Most Popular
+          </span>
+        </div>
+      )}
+      {children}
+    </Card>
+  )
+}

package/src/components/blocks/ecommerce/pricing-tier/index.ts

@@ -0,0 +1,3 @@
+export * from './PricingTier'
+export * from './PricingHeader'
+export * from './PricingFeatureList'

package/src/components/blocks/ecommerce/product-card/ProductCard.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import type { HTMLAttributes } from 'react'
+import { Card } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+interface ProductCardProps {
+  className?: HTMLAttributes<HTMLDivElement>['className']
+  children?: React.ReactNode
+}
+
+export function ProductCard({ className, children }: ProductCardProps) {
+  return (
+    <Card className={cn('overflow-hidden flex flex-col group transition-all hover:shadow-md', className)}>
+      {children}
+    </Card>
+  )
+}

package/src/components/blocks/ecommerce/product-card/ProductCardContent.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { CardContent } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+export function ProductCardContent({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <CardContent className={cn('p-4 flex-1 flex flex-col', className)} {...props}>
+      {children}
+    </CardContent>
+  )
+}

package/src/components/blocks/ecommerce/product-card/ProductCardImage.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface ProductCardImageProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string
+  alt?: string
+}
+
+export function ProductCardImage({ src, alt, className, children, ...props }: ProductCardImageProps) {
+  return (
+    <div className={cn('relative aspect-[4/3] overflow-hidden bg-muted', className)} {...props}>
+      <img
+        src={src}
+        alt={alt}
+        className="object-cover w-full h-full transition-transform duration-300 group-hover:scale-105"
+      />
+      {children}
+    </div>
+  )
+}

package/src/components/blocks/ecommerce/product-card/ProductCardPrice.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface ProductCardPriceProps extends React.HTMLAttributes<HTMLDivElement> {
+  price: string
+  originalPrice?: string
+}
+
+export function ProductCardPrice({ price, originalPrice, className, ...props }: ProductCardPriceProps) {
+  return (
+    <div className={cn('mt-auto pt-4 flex items-center gap-2', className)} {...props}>
+      <span className="text-lg font-semibold">{price}</span>
+      {originalPrice && (
+        <span className="text-sm text-muted-foreground line-through">
+          {originalPrice}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/components/blocks/ecommerce/product-card/index.ts

@@ -0,0 +1,4 @@
+export * from './ProductCard'
+export * from './ProductCardImage'
+export * from './ProductCardContent'
+export * from './ProductCardPrice'

package/src/components/blocks/ecommerce/rating-summary/RatingStars.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Star, StarHalf } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface RatingStarsProps {
+  rating: number
+  max?: number
+  className?: string
+}
+
+export function RatingStars({ rating, max = 5, className }: RatingStarsProps) {
+  return (
+    <div className={cn('flex items-center gap-0.5', className)}>
+      {Array.from({ length: max }, (_, idx) => {
+        const i = idx + 1
+        if (i <= rating) {
+          return (
+            <Star key={i} className="w-4 h-4 fill-primary text-primary" />
+          )
+        } else if (i - 0.5 <= rating) {
+          return (
+            <StarHalf key={i} className="w-4 h-4 fill-primary text-primary" />
+          )
+        } else {
+          return (
+            <Star key={i} className="w-4 h-4 text-muted-foreground" />
+          )
+        }
+      })}
+    </div>
+  )
+}

package/src/components/blocks/ecommerce/rating-summary/index.ts

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

package/src/components/blocks/feedback/empty-state/EmptyState.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Plus } from 'lucide-react'
+
+interface EmptyStateProps {
+  title: string
+  description?: string
+  icon?: React.ComponentType<{ className?: string }>
+  actionLabel?: string
+  className?: string
+  onAction?: () => void
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon: Icon,
+  actionLabel,
+  className,
+  onAction,
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center py-12 px-4 sm:px-6 text-center border-2 border-dashed rounded-xl bg-muted/20',
+        className,
+      )}
+    >
+      <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mb-4">
+        {Icon ? (
+          <Icon className="h-6 w-6 text-muted-foreground" />
+        ) : (
+          <div className="h-6 w-6 rounded border-2 border-muted-foreground/30" />
+        )}
+      </div>
+
+      <h3 className="text-lg font-semibold text-foreground mb-1">{title}</h3>
+      {description && (
+        <p className="text-sm text-muted-foreground max-w-sm mx-auto mb-6">
+          {description}
+        </p>
+      )}
+
+      {actionLabel && (
+        <Button onClick={onAction}>
+          <Plus className="mr-2 h-4 w-4" />
+          {actionLabel}
+        </Button>
+      )}
+    </div>
+  )
+}

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

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