@hanzo/ui 4.8.5 → 5.0.0

package/blocks/data-display/activity-feed.tsx

@@ -1,242 +0,0 @@
-'use client'
-
-import { cn } from '@hanzo/ui/util'
-import { Avatar, AvatarFallback, AvatarImage } from '@hanzo/ui/primitives'
-import { Badge } from '@hanzo/ui/primitives'
-import { Card, CardContent, CardHeader, CardTitle } from '@hanzo/ui/primitives'
-import type { LucideIcon } from 'lucide-react'
-
-interface Activity {
-  id: string | number
-  user: {
-    name: string
-    avatar?: string
-    email?: string
-  }
-  action: string
-  target?: string
-  timestamp: Date | string
-  type?: 'default' | 'success' | 'warning' | 'error' | 'info'
-  icon?: LucideIcon
-  metadata?: Record<string, any>
-}
-
-interface ActivityFeedProps extends React.ComponentPropsWithoutRef<'div'> {
-  activities: Activity[]
-  title?: string
-  variant?: 'default' | 'timeline' | 'compact'
-  showDate?: boolean
-}
-
-export function ActivityFeed({
-  className,
-  activities,
-  title,
-  variant = 'default',
-  showDate = true,
-  ...props
-}: ActivityFeedProps) {
-  const formatTime = (timestamp: Date | string) => {
-    const date = new Date(timestamp)
-    const now = new Date()
-    const diff = now.getTime() - date.getTime()
-    
-    const minutes = Math.floor(diff / 60000)
-    const hours = Math.floor(diff / 3600000)
-    const days = Math.floor(diff / 86400000)
-    
-    if (minutes < 1) return 'Just now'
-    if (minutes < 60) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
-    if (hours < 24) return `${hours} hour${hours > 1 ? 's' : ''} ago`
-    if (days < 7) return `${days} day${days > 1 ? 's' : ''} ago`
-    
-    return date.toLocaleDateString()
-  }
-
-  const getTypeStyles = (type?: Activity['type']) => {
-    switch (type) {
-      case 'success':
-        return 'border-green-500 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100'
-      case 'warning':
-        return 'border-yellow-500 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100'
-      case 'error':
-        return 'border-red-500 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100'
-      case 'info':
-        return 'border-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100'
-      default:
-        return ''
-    }
-  }
-
-  const getUserInitials = (name: string) => {
-    return name
-      .split(' ')
-      .map((n) => n[0])
-      .join('')
-      .toUpperCase()
-  }
-
-  if (variant === 'timeline') {
-    return (
-      <div className={cn('space-y-4', className)} {...props}>
-        {title && <h3 className="text-lg font-semibold">{title}</h3>}
-        <div className="relative">
-          <div className="absolute left-6 top-0 h-full w-0.5 bg-border" />
-          <div className="space-y-6">
-            {activities.map((activity, i) => {
-              const Icon = activity.icon
-              return (
-                <div key={activity.id || i} className="relative flex gap-4">
-                  <div className="relative z-10 flex h-12 w-12 items-center justify-center">
-                    <div className="absolute h-3 w-3 rounded-full bg-background border-2 border-primary" />
-                  </div>
-                  <div className="flex-1 space-y-1">
-                    <div className="flex items-start justify-between">
-                      <div className="space-y-1">
-                        <p className="text-sm">
-                          <span className="font-semibold">{activity.user.name}</span>{' '}
-                          {activity.action}
-                          {activity.target && (
-                            <span className="font-medium"> {activity.target}</span>
-                          )}
-                        </p>
-                        {activity.metadata && (
-                          <div className="flex flex-wrap gap-2">
-                            {Object.entries(activity.metadata).map(([key, value]) => (
-                              <Badge key={key} variant="secondary" className="text-xs">
-                                {key}: {value}
-                              </Badge>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                      {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
-                    </div>
-                    {showDate && (
-                      <p className="text-xs text-muted-foreground">
-                        {formatTime(activity.timestamp)}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'compact') {
-    return (
-      <Card className={className} {...props}>
-        {title && (
-          <CardHeader>
-            <CardTitle>{title}</CardTitle>
-          </CardHeader>
-        )}
-        <CardContent className="p-0">
-          <div className="divide-y">
-            {activities.map((activity, i) => {
-              const Icon = activity.icon
-              return (
-                <div
-                  key={activity.id || i}
-                  className={cn(
-                    'flex items-center gap-3 px-6 py-3',
-                    getTypeStyles(activity.type)
-                  )}
-                >
-                  <Avatar className="h-8 w-8">
-                    <AvatarImage src={activity.user.avatar} />
-                    <AvatarFallback className="text-xs">
-                      {getUserInitials(activity.user.name)}
-                    </AvatarFallback>
-                  </Avatar>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm truncate">
-                      <span className="font-medium">{activity.user.name}</span>{' '}
-                      {activity.action}
-                      {activity.target && (
-                        <span className="font-medium"> {activity.target}</span>
-                      )}
-                    </p>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
-                    {showDate && (
-                      <p className="text-xs text-muted-foreground">
-                        {formatTime(activity.timestamp)}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  // Default variant
-  return (
-    <div className={cn('space-y-4', className)} {...props}>
-      {title && <h3 className="text-lg font-semibold">{title}</h3>}
-      <div className="space-y-4">
-        {activities.map((activity, i) => {
-          const Icon = activity.icon
-          return (
-            <div
-              key={activity.id || i}
-              className={cn(
-                'flex gap-4 rounded-lg border p-4',
-                getTypeStyles(activity.type)
-              )}
-            >
-              <Avatar>
-                <AvatarImage src={activity.user.avatar} />
-                <AvatarFallback>
-                  {getUserInitials(activity.user.name)}
-                </AvatarFallback>
-              </Avatar>
-              <div className="flex-1 space-y-1">
-                <div className="flex items-start justify-between">
-                  <div>
-                    <p className="text-sm">
-                      <span className="font-semibold">{activity.user.name}</span>{' '}
-                      {activity.action}
-                      {activity.target && (
-                        <span className="font-medium"> {activity.target}</span>
-                      )}
-                    </p>
-                    {activity.user.email && (
-                      <p className="text-xs text-muted-foreground">
-                        {activity.user.email}
-                      </p>
-                    )}
-                  </div>
-                  {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
-                </div>
-                {activity.metadata && (
-                  <div className="flex flex-wrap gap-2 pt-2">
-                    {Object.entries(activity.metadata).map(([key, value]) => (
-                      <Badge key={key} variant="secondary" className="text-xs">
-                        {key}: {value}
-                      </Badge>
-                    ))}
-                  </div>
-                )}
-                {showDate && (
-                  <p className="text-xs text-muted-foreground">
-                    {formatTime(activity.timestamp)}
-                  </p>
-                )}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}

package/blocks/data-display/data-table.tsx

@@ -1,235 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { cn } from '@hanzo/ui/util'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@hanzo/ui/primitives'
-import { Button } from '@hanzo/ui/primitives'
-import { Input } from '@hanzo/ui/primitives'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@hanzo/ui/primitives'
-import { ChevronUp, ChevronDown, Search } from 'lucide-react'
-
-interface Column<T> {
-  key: string
-  header: string
-  accessor: (row: T) => any
-  sortable?: boolean
-  searchable?: boolean
-  render?: (value: any, row: T) => React.ReactNode
-}
-
-interface DataTableProps<T> extends React.ComponentPropsWithoutRef<'div'> {
-  data: T[]
-  columns: Column<T>[]
-  pageSize?: number
-  searchable?: boolean
-  title?: string
-  description?: string
-  onRowClick?: (row: T) => void
-}
-
-export function DataTable<T>({
-  className,
-  data,
-  columns,
-  pageSize = 10,
-  searchable = true,
-  title,
-  description,
-  onRowClick,
-  ...props
-}: DataTableProps<T>) {
-  const [currentPage, setCurrentPage] = useState(1)
-  const [searchTerm, setSearchTerm] = useState('')
-  const [sortColumn, setSortColumn] = useState<string | null>(null)
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
-  const [itemsPerPage, setItemsPerPage] = useState(pageSize)
-
-  // Filter data based on search
-  const filteredData = searchTerm
-    ? data.filter((row) =>
-        columns.some((column) => {
-          if (column.searchable === false) return false
-          const value = column.accessor(row)
-          return value?.toString().toLowerCase().includes(searchTerm.toLowerCase())
-        })
-      )
-    : data
-
-  // Sort data
-  const sortedData = [...filteredData].sort((a, b) => {
-    if (!sortColumn) return 0
-    
-    const column = columns.find((col) => col.key === sortColumn)
-    if (!column) return 0
-    
-    const aValue = column.accessor(a)
-    const bValue = column.accessor(b)
-    
-    if (aValue === bValue) return 0
-    
-    const comparison = aValue < bValue ? -1 : 1
-    return sortDirection === 'asc' ? comparison : -comparison
-  })
-
-  // Paginate data
-  const totalPages = Math.ceil(sortedData.length / itemsPerPage)
-  const startIndex = (currentPage - 1) * itemsPerPage
-  const paginatedData = sortedData.slice(startIndex, startIndex + itemsPerPage)
-
-  const handleSort = (columnKey: string) => {
-    if (sortColumn === columnKey) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
-    } else {
-      setSortColumn(columnKey)
-      setSortDirection('asc')
-    }
-  }
-
-  return (
-    <div className={cn('space-y-4', className)} {...props}>
-      {(title || description || searchable) && (
-        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-          <div>
-            {title && <h3 className="text-lg font-semibold">{title}</h3>}
-            {description && (
-              <p className="text-sm text-muted-foreground">{description}</p>
-            )}
-          </div>
-          {searchable && (
-            <div className="relative w-full sm:w-64">
-              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder="Search..."
-                value={searchTerm}
-                onChange={(e) => {
-                  setSearchTerm(e.target.value)
-                  setCurrentPage(1)
-                }}
-                className="pl-8"
-              />
-            </div>
-          )}
-        </div>
-      )}
-
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              {columns.map((column) => (
-                <TableHead
-                  key={column.key}
-                  className={column.sortable ? 'cursor-pointer select-none' : ''}
-                  onClick={() => column.sortable && handleSort(column.key)}
-                >
-                  <div className="flex items-center gap-2">
-                    {column.header}
-                    {column.sortable && sortColumn === column.key && (
-                      <>
-                        {sortDirection === 'asc' ? (
-                          <ChevronUp className="h-4 w-4" />
-                        ) : (
-                          <ChevronDown className="h-4 w-4" />
-                        )}
-                      </>
-                    )}
-                  </div>
-                </TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {paginatedData.length === 0 ? (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  No data available
-                </TableCell>
-              </TableRow>
-            ) : (
-              paginatedData.map((row, i) => (
-                <TableRow
-                  key={i}
-                  className={onRowClick ? 'cursor-pointer' : ''}
-                  onClick={() => onRowClick?.(row)}
-                >
-                  {columns.map((column) => (
-                    <TableCell key={column.key}>
-                      {column.render
-                        ? column.render(column.accessor(row), row)
-                        : column.accessor(row)}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      {totalPages > 1 && (
-        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <span>Rows per page:</span>
-            <Select
-              value={itemsPerPage.toString()}
-              onValueChange={(value) => {
-                setItemsPerPage(parseInt(value))
-                setCurrentPage(1)
-              }}
-            >
-              <SelectTrigger className="h-8 w-16">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="5">5</SelectItem>
-                <SelectItem value="10">10</SelectItem>
-                <SelectItem value="25">25</SelectItem>
-                <SelectItem value="50">50</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground">
-              Showing {startIndex + 1}-{Math.min(startIndex + itemsPerPage, sortedData.length)} of {sortedData.length}
-            </span>
-            <div className="flex gap-1">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setCurrentPage(currentPage - 1)}
-                disabled={currentPage === 1}
-              >
-                Previous
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setCurrentPage(currentPage + 1)}
-                disabled={currentPage === totalPages}
-              >
-                Next
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/blocks/data-display/stats-grid.tsx

@@ -1,194 +0,0 @@
-'use client'
-
-import { cn } from '@hanzo/ui/util'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@hanzo/ui/primitives'
-import type { LucideIcon } from 'lucide-react'
-import { ArrowUp, ArrowDown, Minus } from 'lucide-react'
-
-interface Stat {
-  title: string
-  value: string | number
-  description?: string
-  change?: number
-  changeLabel?: string
-  icon?: LucideIcon
-  trend?: 'up' | 'down' | 'neutral'
-}
-
-interface StatsGridProps extends React.ComponentPropsWithoutRef<'div'> {
-  stats: Stat[]
-  columns?: 2 | 3 | 4
-  variant?: 'default' | 'compact' | 'detailed'
-}
-
-export function StatsGrid({
-  className,
-  stats,
-  columns = 4,
-  variant = 'default',
-  ...props
-}: StatsGridProps) {
-  const gridCols = {
-    2: 'sm:grid-cols-2',
-    3: 'sm:grid-cols-2 lg:grid-cols-3',
-    4: 'sm:grid-cols-2 lg:grid-cols-4',
-  }[columns]
-
-  const getTrendIcon = (trend?: 'up' | 'down' | 'neutral') => {
-    switch (trend) {
-      case 'up':
-        return <ArrowUp className="h-4 w-4 text-green-500" />
-      case 'down':
-        return <ArrowDown className="h-4 w-4 text-red-500" />
-      case 'neutral':
-        return <Minus className="h-4 w-4 text-muted-foreground" />
-      default:
-        return null
-    }
-  }
-
-  const getTrendColor = (change?: number) => {
-    if (!change) return 'text-muted-foreground'
-    return change > 0 ? 'text-green-500' : 'text-red-500'
-  }
-
-  if (variant === 'compact') {
-    return (
-      <div className={cn('grid gap-4', gridCols, className)} {...props}>
-        {stats.map((stat, i) => {
-          const Icon = stat.icon
-          return (
-            <Card key={i}>
-              <CardHeader className="pb-2">
-                <CardDescription className="flex items-center justify-between">
-                  {stat.title}
-                  {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-baseline justify-between">
-                  <div className="text-2xl font-bold">{stat.value}</div>
-                  {(stat.change !== undefined || stat.trend) && (
-                    <div className="flex items-center gap-1">
-                      {getTrendIcon(stat.trend)}
-                      {stat.change !== undefined && (
-                        <span className={cn('text-xs', getTrendColor(stat.change))}>
-                          {stat.change > 0 && '+'}
-                          {stat.change}%
-                        </span>
-                      )}
-                    </div>
-                  )}
-                </div>
-                {stat.changeLabel && (
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    {stat.changeLabel}
-                  </p>
-                )}
-              </CardContent>
-            </Card>
-          )
-        })}
-      </div>
-    )
-  }
-
-  if (variant === 'detailed') {
-    return (
-      <div className={cn('grid gap-6', gridCols, className)} {...props}>
-        {stats.map((stat, i) => {
-          const Icon = stat.icon
-          return (
-            <Card key={i}>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <CardTitle className="text-sm font-medium">
-                    {stat.title}
-                  </CardTitle>
-                  {Icon && (
-                    <div className="rounded-lg bg-primary/10 p-2">
-                      <Icon className="h-5 w-5 text-primary" />
-                    </div>
-                  )}
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-1">
-                  <div className="text-3xl font-bold">{stat.value}</div>
-                  {stat.description && (
-                    <CardDescription>{stat.description}</CardDescription>
-                  )}
-                  {(stat.change !== undefined || stat.trend || stat.changeLabel) && (
-                    <div className="flex items-center gap-2 pt-2">
-                      <div className="flex items-center gap-1">
-                        {getTrendIcon(stat.trend)}
-                        {stat.change !== undefined && (
-                          <span
-                            className={cn(
-                              'text-sm font-medium',
-                              getTrendColor(stat.change)
-                            )}
-                          >
-                            {stat.change > 0 && '+'}
-                            {stat.change}%
-                          </span>
-                        )}
-                      </div>
-                      {stat.changeLabel && (
-                        <span className="text-sm text-muted-foreground">
-                          {stat.changeLabel}
-                        </span>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          )
-        })}
-      </div>
-    )
-  }
-
-  // Default variant
-  return (
-    <div className={cn('grid gap-4', gridCols, className)} {...props}>
-      {stats.map((stat, i) => {
-        const Icon = stat.icon
-        return (
-          <Card key={i}>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                {stat.title}
-              </CardTitle>
-              {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{stat.value}</div>
-              {stat.description && (
-                <p className="text-xs text-muted-foreground">
-                  {stat.description}
-                </p>
-              )}
-              {(stat.change !== undefined || stat.changeLabel) && (
-                <div className="mt-2 flex items-center text-xs">
-                  {stat.change !== undefined && (
-                    <span className={getTrendColor(stat.change)}>
-                      {stat.change > 0 && '+'}
-                      {stat.change}%
-                    </span>
-                  )}
-                  {stat.changeLabel && (
-                    <span className="ml-1 text-muted-foreground">
-                      {stat.changeLabel}
-                    </span>
-                  )}
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        )
-      })}
-    </div>
-  )
-}

package/blocks/def/accordian-block.ts

@@ -1,14 +0,0 @@
-import React from 'react'
-import type Block from './block'
-
-interface AccordianBlock extends Block {
-  blockType: 'accordian'
-  items: {
-    trigger: string
-    content: React.ReactNode 
-  }[]
-}
-
-export {
-  type AccordianBlock as default
-}

package/blocks/def/block.ts

@@ -1,7 +0,0 @@
-interface Block {
-  blockType: string
-}
-
-export {
-  type Block as default
-}