@reinvented/design 0.4.0 → 1.1.0

package/src/components/blocks/media/call-controls/CallControlButton.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+
+interface CallControlButtonProps {
+  tooltip?: string
+  active?: boolean
+  destructive?: boolean
+  className?: string
+  children?: React.ReactNode
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+}
+
+export function CallControlButton({
+  tooltip,
+  active,
+  destructive,
+  className,
+  children,
+  onClick,
+}: CallControlButtonProps) {
+  const variant = destructive ? 'destructive' : active ? 'default' : 'secondary'
+
+  const button = (
+    <Button
+      size="icon"
+      variant={variant}
+      className={cn('rounded-full h-12 w-12', className)}
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  )
+
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            {button}
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    )
+  }
+
+  return button
+}

package/src/components/blocks/media/call-controls/CallControls.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+export function CallControls({ className, children }: { className?: string; children?: React.ReactNode }) {
+  return (
+    <div className={cn('flex items-center justify-center gap-3 bg-background p-3 rounded-full shadow-sm border mx-auto w-fit', className)}>
+      {children}
+    </div>
+  )
+}

package/src/components/blocks/media/call-controls/index.ts

@@ -0,0 +1,2 @@
+export * from './CallControls'
+export * from './CallControlButton'

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

@@ -0,0 +1,2 @@
+export * from './media-player'
+export * from './call-controls'

package/src/components/blocks/media/media-player/MediaPlayer.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+export function MediaPlayer({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'relative rounded-xl overflow-hidden bg-black flex flex-col shadow-sm border',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/blocks/media/media-player/MediaPlayerControls.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+export function MediaPlayerControls({
+  className,
+  children,
+}: {
+  className?: string
+  children?: React.ReactNode
+}) {
+  return (
+    <div className={cn('p-4 bg-background/95 backdrop-blur flex flex-col gap-2 relative z-10 w-full', className)}>
+      {children}
+    </div>
+  )
+}

package/src/components/blocks/media/media-player/MediaPlayerScrubber.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Slider } from '@/components/ui/slider'
+
+interface MediaPlayerScrubberProps {
+  defaultValue?: number[]
+  max?: number
+  currentTime?: string
+  totalTime?: string
+}
+
+export function MediaPlayerScrubber({
+  defaultValue,
+  max,
+  currentTime,
+  totalTime,
+}: MediaPlayerScrubberProps) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-xs text-muted-foreground tabular-nums">{currentTime || '0:00'}</span>
+      <Slider
+        defaultValue={defaultValue || [0]}
+        max={max || 100}
+        step={1}
+        className="flex-1"
+      />
+      <span className="text-xs text-muted-foreground tabular-nums">{totalTime || '0:00'}</span>
+    </div>
+  )
+}

package/src/components/blocks/media/media-player/MediaPlayerVideo.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import type { HTMLAttributes } from 'react'
+import { cn } from '@/lib/utils'
+import { Play } from 'lucide-react'
+
+interface MediaPlayerVideoProps {
+  src?: string
+  poster?: string
+  className?: HTMLAttributes<HTMLElement>['className']
+}
+
+export function MediaPlayerVideo({ src, poster, className }: MediaPlayerVideoProps) {
+  return (
+    <div className={cn('relative aspect-video bg-muted flex items-center justify-center group', className)}>
+      {poster && (
+        <img src={poster} className="absolute inset-0 w-full h-full object-cover opacity-60" />
+      )}
+      <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors flex items-center justify-center cursor-pointer">
+        <div className="h-12 w-12 rounded-full bg-background/90 text-foreground flex items-center justify-center shadow-lg transform transition-transform group-hover:scale-110">
+          <Play className="h-5 w-5 ml-1" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/media/media-player/index.ts

@@ -0,0 +1,4 @@
+export * from './MediaPlayer'
+export * from './MediaPlayerVideo'
+export * from './MediaPlayerControls'
+export * from './MediaPlayerScrubber'

package/src/components/blocks/navigation/app-sidebar/AppSidebar.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { ScrollArea } from '@/components/ui/scroll-area'
+
+interface AppSidebarProps {
+  className?: string
+  header?: React.ReactNode
+  footer?: React.ReactNode
+  children?: React.ReactNode
+}
+
+export function AppSidebar({ className, header, footer, children }: AppSidebarProps) {
+  return (
+    <div className={cn('flex flex-col h-screen w-64 border-r bg-muted/10 text-foreground shrink-0', className)}>
+      <div className="h-14 px-4 border-b flex items-center shrink-0">
+        {header}
+      </div>
+
+      <ScrollArea className="flex-1 py-4">
+        <div className="px-3 flex flex-col gap-1">
+          {children}
+        </div>
+      </ScrollArea>
+
+      {footer && (
+        <div className="p-4 border-t shrink-0">
+          {footer}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/blocks/navigation/app-sidebar/NavItem.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface NavItemProps {
+  href?: string
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  title: string
+  isActive?: boolean
+  className?: string
+  badge?: React.ReactNode
+}
+
+export function NavItem({ href, icon: Icon, title, isActive, className, badge }: NavItemProps) {
+  const classes = cn(
+    'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors w-full text-left',
+    isActive
+      ? 'bg-primary/5 text-primary hover:bg-primary/10'
+      : 'text-muted-foreground hover:text-foreground hover:bg-muted',
+    className
+  )
+
+  const content = (
+    <>
+      {Icon && <Icon className="h-4 w-4 shrink-0" />}
+      <span className="truncate flex-1">{title}</span>
+      {badge}
+    </>
+  )
+
+  if (href) {
+    return (
+      <a href={href} className={classes}>
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <button className={classes}>
+      {content}
+    </button>
+  )
+}

package/src/components/blocks/navigation/app-sidebar/index.ts

@@ -0,0 +1,2 @@
+export * from './AppSidebar'
+export * from './NavItem'

package/src/components/blocks/navigation/context-switcher/ContextSwitcher.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu'
+import { ChevronsUpDown, Building2 } from 'lucide-react'
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
+import { cn } from '@/lib/utils'
+
+interface ContextItem {
+  id: string
+  name: string
+  avatar?: string
+}
+
+interface ContextSwitcherProps {
+  contexts: ContextItem[]
+  activeId?: string
+  className?: string
+  onSelect?: (id: string) => void
+}
+
+export function ContextSwitcher({ contexts, activeId, className, onSelect }: ContextSwitcherProps) {
+  const activeContext = contexts.find((c) => c.id === activeId)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          className={cn(
+            'flex items-center gap-2 hover:bg-accent hover:text-accent-foreground px-2 py-1.5 rounded-md transition-colors w-full outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            className
+          )}
+        >
+          <Avatar className="h-6 w-6 rounded-md shrink-0 border shadow-sm">
+            {activeContext?.avatar && <AvatarImage src={activeContext.avatar} />}
+            <AvatarFallback className="rounded-md bg-primary/10 text-primary text-xs">
+              <Building2 className="h-3 w-3" />
+            </AvatarFallback>
+          </Avatar>
+          <span className="truncate text-sm font-medium flex-1 text-left">
+            {activeContext?.name || 'Select Workspace'}
+          </span>
+          <ChevronsUpDown className="h-3 w-3 shrink-0 text-muted-foreground ml-1" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="start">
+        <DropdownMenuLabel className="text-xs text-muted-foreground uppercase tracking-wider font-semibold">
+          Workspaces
+        </DropdownMenuLabel>
+        {contexts.map((ctx) => (
+          <DropdownMenuItem
+            key={ctx.id}
+            onClick={() => onSelect?.(ctx.id)}
+            className="gap-2 cursor-pointer py-2"
+          >
+            <Avatar className="h-5 w-5 rounded shrink-0 border">
+              {ctx.avatar && <AvatarImage src={ctx.avatar} />}
+              <AvatarFallback className="rounded text-[10px]">
+                {ctx.name.substring(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <span className="truncate flex-1">{ctx.name}</span>
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="cursor-pointer">
+          <span className="text-muted-foreground">Create Workspace...</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/blocks/navigation/context-switcher/index.ts

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

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

@@ -0,0 +1,3 @@
+export * from './app-sidebar'
+export * from './top-navbar'
+export * from './context-switcher'

package/src/components/blocks/navigation/top-navbar/TopNavbar.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Menu } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+interface TopNavbarProps {
+  className?: string
+  onMenuClick?: () => void
+  brand?: React.ReactNode
+  center?: React.ReactNode
+  actions?: React.ReactNode
+}
+
+export function TopNavbar({ className, onMenuClick, brand, center, actions }: TopNavbarProps) {
+  return (
+    <header
+      className={cn(
+        'sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur flex h-14 items-center gap-4 px-4 sm:px-6 shadow-sm',
+        className
+      )}
+    >
+      <Button
+        variant="ghost"
+        size="icon"
+        className="md:hidden shrink-0"
+        onClick={onMenuClick}
+      >
+        <Menu className="h-5 w-5" />
+        <span className="sr-only">Toggle menu</span>
+      </Button>
+
+      <div className="flex items-center gap-2 md:gap-4 shrink-0 font-bold text-lg">
+        {brand}
+      </div>
+
+      <div className="flex-1 flex items-center justify-end md:justify-between gap-4">
+        <div className="hidden md:flex flex-[0_1_auto] w-full max-w-sm mr-auto ml-4">
+          {center}
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {actions}
+        </div>
+      </div>
+    </header>
+  )
+}

package/src/components/blocks/navigation/top-navbar/index.ts

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

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

@@ -0,0 +1,2 @@
+export * from './onboarding-welcome'
+export * from './step-wizard'

package/src/components/blocks/onboarding/onboarding-welcome/OnboardingWelcome.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { CheckCircle2, ArrowRight } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface OnboardingWelcomeProps {
+  title: string
+  description: string
+  image?: string
+  features?: string[]
+  primaryAction?: string
+  secondaryAction?: string
+  className?: string
+  onPrimary?: () => void
+  onSecondary?: () => void
+}
+
+export function OnboardingWelcome({
+  title,
+  description,
+  image,
+  features,
+  primaryAction,
+  secondaryAction,
+  className,
+  onPrimary,
+  onSecondary,
+}: OnboardingWelcomeProps) {
+  return (
+    <Card className={cn('overflow-hidden border-none shadow-lg max-w-2xl mx-auto', className)}>
+      {image ? (
+        <div className="w-full h-48 sm:h-64 bg-muted relative">
+          <img src={image} className="w-full h-full object-cover" />
+          <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent"></div>
+        </div>
+      ) : (
+        <div className="w-full h-32 bg-gradient-to-br from-primary/20 via-primary/5 to-background"></div>
+      )}
+
+      <CardContent className="p-8 sm:p-10 relative z-10 -mt-8 sm:-mt-12 bg-background/95 backdrop-blur shadow-sm mx-6 sm:mx-10 rounded-xl border mb-8">
+        <h2 className="text-2xl sm:text-3xl font-bold tracking-tight mb-3 text-center">{title}</h2>
+        <p className="text-muted-foreground text-center mb-8 leading-relaxed">
+          {description}
+        </p>
+
+        {features && features.length > 0 && (
+          <div className="space-y-4 mb-8">
+            {features.map((feature) => (
+              <div key={feature} className="flex items-start gap-3">
+                <CheckCircle2 className="h-5 w-5 text-primary shrink-0 mt-0.5" />
+                <span className="text-sm font-medium leading-relaxed">{feature}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="flex flex-col sm:flex-row gap-3 mt-auto">
+          {secondaryAction && (
+            <Button variant="outline" className="w-full sm:w-1/2" onClick={onSecondary}>
+              {secondaryAction}
+            </Button>
+          )}
+          {primaryAction && (
+            <Button className={cn('w-full', secondaryAction && 'sm:w-1/2')} onClick={onPrimary}>
+              {primaryAction}
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/blocks/onboarding/onboarding-welcome/index.ts

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

package/src/components/blocks/onboarding/step-wizard/StepWizard.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-react'
+
+interface StepWizardProps {
+  steps: { title: string; description?: string }[]
+  currentStep: number // 1-indexed
+  className?: string
+}
+
+export function StepWizard({ steps, currentStep, className }: StepWizardProps) {
+  const progressWidth = steps.length > 1
+    ? ((currentStep - 1) / (steps.length - 1)) * 100
+    : 0
+
+  return (
+    <div className={cn('w-full', className)}>
+      <div className="flex items-center justify-between w-full relative">
+        {/* Background Connecting Line */}
+        <div
+          className="absolute top-4 left-0 h-0.5 bg-muted-foreground/20 -z-10"
+          style={{ width: '100%' }}
+        />
+
+        {/* Colored Progress Line */}
+        <div
+          className="absolute top-4 left-0 h-0.5 bg-primary transition-all duration-300 -z-10"
+          style={{ width: `${progressWidth}%` }}
+        />
+
+        {steps.map((step, index) => (
+          <div
+            key={step.title}
+            className="flex flex-col items-center relative z-10"
+          >
+            <div
+              className={cn(
+                'w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-colors duration-200 shadow-sm',
+                index + 1 < currentStep
+                  ? 'bg-primary text-primary-foreground ring-2 ring-primary ring-offset-2 ring-offset-background'
+                  : index + 1 === currentStep
+                    ? 'bg-primary text-primary-foreground ring-4 ring-primary/20'
+                    : 'bg-background text-muted-foreground border-2 border-muted-foreground/30'
+              )}
+            >
+              {index + 1 < currentStep ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <span>{index + 1}</span>
+              )}
+            </div>
+            <div className="mt-3 text-center hidden sm:flex flex-col items-center max-w-[120px]">
+              <h4
+                className={cn(
+                  'text-sm font-semibold whitespace-nowrap',
+                  index + 1 <= currentStep ? 'text-foreground' : 'text-muted-foreground'
+                )}
+              >
+                {step.title}
+              </h4>
+              {step.description && (
+                <p className="text-xs text-muted-foreground mt-0.5 text-center line-clamp-2">
+                  {step.description}
+                </p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/onboarding/step-wizard/index.ts

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

package/src/components/blocks/profiles/connection-list/ConnectionItem.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Card } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+interface ConnectionItemProps {
+  name: string
+  description?: string
+  avatar?: string
+  className?: string
+  action?: React.ReactNode
+}
+
+export function ConnectionItem({ name, description, avatar, className, action }: ConnectionItemProps) {
+  return (
+    <Card className={cn('flex items-center justify-between p-4 shadow-sm hover:shadow transition-shadow border-muted', className)}>
+      <div className="flex items-center gap-4">
+        <Avatar className="h-12 w-12 border border-border/50">
+          {avatar && <AvatarImage src={avatar} />}
+          <AvatarFallback>{name.substring(0, 2).toUpperCase()}</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-col">
+          <span className="font-semibold text-foreground text-sm lg:text-base leading-tight">{name}</span>
+          {description && (
+            <span className="text-xs lg:text-sm text-muted-foreground mt-0.5">{description}</span>
+          )}
+        </div>
+      </div>
+
+      <div className="shrink-0 flex items-center ml-4">
+        {action}
+      </div>
+    </Card>
+  )
+}

package/src/components/blocks/profiles/connection-list/ConnectionList.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+export function ConnectionList({
+  className,
+  children,
+}: {
+  className?: string
+  children?: React.ReactNode
+}) {
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      {children}
+    </div>
+  )
+}

package/src/components/blocks/profiles/connection-list/index.ts

@@ -0,0 +1,2 @@
+export * from './ConnectionList'
+export * from './ConnectionItem'

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

@@ -0,0 +1,3 @@
+export * from './profile-header'
+export * from './profile-stats'
+export * from './connection-list'