@reinvented/design 0.3.0 → 1.0.0

package/src/components/blocks/profiles/profile-header/ProfileHeader.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+
+interface ProfileHeaderProps {
+  name: string
+  handle?: string
+  bio?: string
+  avatar?: string
+  banner?: string
+  verified?: boolean
+  className?: string
+  actions?: React.ReactNode
+}
+
+export function ProfileHeader({
+  name,
+  handle,
+  bio,
+  avatar,
+  banner,
+  verified,
+  className,
+  actions,
+}: ProfileHeaderProps) {
+  return (
+    <div className={cn('relative flex flex-col', className)}>
+      {/* Banner */}
+      <div className="h-48 md:h-64 w-full bg-muted overflow-hidden relative rounded-xl border">
+        {banner ? (
+          <img src={banner} className="w-full h-full object-cover" />
+        ) : (
+          <div className="w-full h-full bg-gradient-to-tr from-primary/10 to-primary/5"></div>
+        )}
+      </div>
+
+      {/* Profile Info */}
+      <div className="px-6 md:px-8 relative flex flex-col md:flex-row md:items-end md:justify-between -mt-16 md:-mt-20 z-10 gap-4 mb-6">
+        <div className="flex flex-col md:flex-row md:items-end gap-4 md:gap-6">
+          <Avatar className="h-32 w-32 border-4 border-background shadow-md">
+            {avatar && <AvatarImage src={avatar} />}
+            <AvatarFallback className="text-4xl">
+              {name.substring(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+
+          <div className="flex flex-col pb-2">
+            <div className="flex items-center gap-2">
+              <h1 className="text-3xl font-bold">{name}</h1>
+              {verified && (
+                <Badge
+                  variant="secondary"
+                  className="h-6 px-1.5 bg-blue-500/10 text-blue-500 hover:bg-blue-500/20 border-transparent"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    stroke="none"
+                  >
+                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+                  </svg>
+                </Badge>
+              )}
+            </div>
+            {handle && (
+              <p className="text-muted-foreground text-lg">{handle}</p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 pb-2 w-full md:w-auto mt-2 md:mt-0 justify-start md:justify-end">
+          {actions}
+        </div>
+      </div>
+
+      {/* Bio */}
+      {bio && (
+        <div className="px-6 md:px-8 max-w-3xl text-foreground text-base leading-relaxed">
+          {bio}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/blocks/profiles/profile-header/index.ts

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

package/src/components/blocks/profiles/profile-stats/ProfileStats.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface ProfileStatsProps {
+  stats: { label: string; value: string | number }[]
+  className?: string
+}
+
+export function ProfileStats({ stats, className }: ProfileStatsProps) {
+  return (
+    <div className={cn('flex flex-wrap items-center gap-6 sm:gap-10 py-4', className)}>
+      {stats.map((stat) => (
+        <div key={stat.label} className="flex flex-col">
+          <span className="text-2xl font-bold tracking-tight text-foreground">{stat.value}</span>
+          <span className="text-sm text-muted-foreground font-medium">{stat.label}</span>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/blocks/profiles/profile-stats/index.ts

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

package/src/components/blocks/scheduling/booking-slot/BookingSlot.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-react'
+
+interface BookingSlotProps {
+  time: string
+  available?: boolean
+  selected?: boolean
+  className?: string
+  onSelect?: () => void
+}
+
+export function BookingSlot({
+  time,
+  available,
+  selected,
+  className,
+  onSelect,
+}: BookingSlotProps) {
+  return (
+    <button
+      disabled={!available}
+      onClick={onSelect}
+      className={cn(
+        'relative flex items-center justify-center w-full py-3 px-4 rounded-md border text-sm font-semibold transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+        available && !selected
+          ? 'bg-background hover:border-primary/50 hover:bg-primary/5 hover:text-primary cursor-pointer'
+          : '',
+        selected
+          ? 'bg-primary border-primary text-primary-foreground shadow-md ring-2 ring-primary ring-offset-2'
+          : '',
+        !available
+          ? 'bg-muted/50 border-muted text-muted-foreground cursor-not-allowed opacity-60'
+          : '',
+        className
+      )}
+    >
+      <span className={selected ? 'pr-4' : ''}>{time}</span>
+      {selected && (
+        <Check className="h-4 w-4 absolute right-3 shrink-0 animate-in zoom-in-50" />
+      )}
+    </button>
+  )
+}

package/src/components/blocks/scheduling/booking-slot/index.ts

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

package/src/components/blocks/scheduling/event-card/EventCard.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Calendar, Clock, MapPin, Video } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface EventCardProps {
+  title: string
+  date: string
+  time: string
+  location?: string
+  isVirtual?: boolean
+  attendees?: number
+  tag?: string
+  tagVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  className?: string
+}
+
+export function EventCard({
+  title,
+  date,
+  time,
+  location,
+  isVirtual,
+  attendees,
+  tag,
+  tagVariant,
+  className,
+}: EventCardProps) {
+  const LocationIcon = isVirtual ? Video : MapPin
+
+  return (
+    <Card
+      className={cn(
+        'overflow-hidden transition-shadow hover:shadow-md cursor-pointer border-l-4 group',
+        className
+      )}
+      style={{ borderLeftColor: 'hsl(var(--primary))' }}
+    >
+      <CardContent className="p-5 flex flex-col h-full">
+        <div className="flex items-start justify-between gap-4 mb-2">
+          <h4 className="font-semibold text-lg leading-tight group-hover:text-primary transition-colors">
+            {title}
+          </h4>
+          {tag && (
+            <Badge variant={tagVariant || 'secondary'} className="shrink-0 text-[10px] uppercase font-mono">
+              {tag}
+            </Badge>
+          )}
+        </div>
+
+        <div className="space-y-2 mt-4 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <Calendar className="h-4 w-4 shrink-0 text-foreground/70" />
+            <span>{date}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Clock className="h-4 w-4 shrink-0 text-foreground/70" />
+            <span>{time}</span>
+          </div>
+          {(location || isVirtual) && (
+            <div className="flex items-center gap-2">
+              <LocationIcon className="h-4 w-4 shrink-0 text-foreground/70" />
+              <span className="truncate">{location || 'Virtual Meeting'}</span>
+            </div>
+          )}
+        </div>
+
+        {attendees != null && attendees > 0 && (
+          <div className="mt-auto pt-4 border-t flex items-center justify-between text-xs text-muted-foreground">
+            <div className="flex -space-x-2 overflow-hidden">
+              {Array.from({ length: Math.min(attendees, 3) }, (_, i) => (
+                <div
+                  key={i}
+                  className="inline-block h-6 w-6 rounded-full ring-2 ring-background bg-muted border"
+                />
+              ))}
+            </div>
+            <span>{attendees} attendees</span>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/blocks/scheduling/event-card/index.ts

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

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

@@ -0,0 +1,3 @@
+export * from './event-card'
+export * from './timeline-row'
+export * from './booking-slot'

package/src/components/blocks/scheduling/timeline-row/TimelineRow.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+
+interface TimelineRowProps {
+  time: string
+  title: string
+  description?: string
+  status?: 'past' | 'current' | 'future'
+  tag?: string
+  isLast?: boolean
+  className?: string
+  children?: React.ReactNode
+}
+
+export function TimelineRow({
+  time,
+  title,
+  description,
+  status,
+  tag,
+  isLast,
+  className,
+  children,
+}: TimelineRowProps) {
+  return (
+    <div className={cn('flex relative min-h-[6rem]', className)}>
+      <div className="w-16 sm:w-24 shrink-0 pt-[3px] text-right pr-4 sm:pr-6 flex flex-col items-end">
+        <span
+          className={cn(
+            'text-xs sm:text-sm font-semibold tracking-tight',
+            status === 'future' ? 'text-muted-foreground' : 'text-foreground'
+          )}
+        >
+          {time}
+        </span>
+      </div>
+
+      <div className="relative flex flex-col items-center">
+        <div
+          className={cn(
+            'h-3 w-3 sm:h-3.5 sm:w-3.5 rounded-full z-10 ring-4 ring-background shrink-0 mt-1',
+            status === 'past' && 'bg-primary',
+            status === 'current' && 'bg-primary ring-primary/20 animate-pulse',
+            status === 'future' && 'bg-muted border-2 border-primary/30'
+          )}
+        />
+        {!isLast && (
+          <div
+            className={cn(
+              'w-0.5 h-full absolute top-3 -z-10',
+              status === 'past' ? 'bg-primary/50' : 'bg-muted'
+            )}
+          />
+        )}
+      </div>
+
+      <div className="flex-1 pb-8 pl-4 sm:pl-6 pt-0">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-1">
+          <h4
+            className={cn(
+              'text-base font-semibold leading-none',
+              status === 'future' ? 'text-muted-foreground' : 'text-foreground'
+            )}
+          >
+            {title}
+          </h4>
+          {tag && (
+            <Badge variant="outline" className="w-fit h-5 px-1.5 text-[10px] uppercase align-middle">
+              {tag}
+            </Badge>
+          )}
+        </div>
+        {description && (
+          <p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">{description}</p>
+        )}
+
+        {children && <div className="mt-3">{children}</div>}
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/scheduling/timeline-row/index.ts

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

package/src/components/blocks/settings/billing-usage/BillingUsage.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Progress } from '@/components/ui/progress'
+import { Card, CardContent } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+interface BillingUsageProps {
+  title: string
+  used: number
+  limit: number
+  unit: string
+  description?: string
+  className?: string
+}
+
+export function BillingUsage({ title, used, limit, unit, description, className }: BillingUsageProps) {
+  const percentage = Math.min(Math.round((used / limit) * 100), 100)
+  const isNearLimit = percentage >= 85
+
+  return (
+    <Card className={cn('shadow-sm', className)}>
+      <CardContent className="p-6">
+        <div className="flex justify-between items-start mb-4">
+          <div>
+            <h4 className="font-semibold text-sm">{title}</h4>
+            {description && (
+              <p className="text-sm text-muted-foreground mt-1">{description}</p>
+            )}
+          </div>
+          <div className="text-right">
+            <span className="text-2xl font-bold tracking-tight">{used.toLocaleString()}</span>
+            <span className="text-sm text-muted-foreground ml-1">/ {limit.toLocaleString()}</span>
+          </div>
+        </div>
+
+        <Progress
+          value={percentage}
+          className={cn('h-2 mb-2', isNearLimit && '[&>div]:bg-rose-500')}
+        />
+
+        <div className="flex justify-between items-center text-xs">
+          <span className="text-muted-foreground">{percentage}% used</span>
+          <span className={isNearLimit ? 'text-rose-500 font-medium' : 'text-muted-foreground'}>
+            {(limit - used).toLocaleString()} {unit} remaining
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/blocks/settings/billing-usage/index.ts

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

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

@@ -0,0 +1,3 @@
+export * from './settings-section'
+export * from './integration-card'
+export * from './billing-usage'

package/src/components/blocks/settings/integration-card/IntegrationCard.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { cn } from '@/lib/utils'
+import { Card, CardContent, CardFooter } from '@/components/ui/card'
+import { Switch } from '@/components/ui/switch'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+
+interface IntegrationCardProps {
+  name: string
+  description: string
+  icon?: string
+  status?: 'connected' | 'disconnected' | 'error'
+  isConfigurable?: boolean
+  className?: string
+}
+
+export function IntegrationCard({
+  name,
+  description,
+  icon,
+  status,
+  isConfigurable,
+  className,
+}: IntegrationCardProps) {
+  const [active, setActive] = useState(status === 'connected')
+
+  return (
+    <Card className={cn('flex flex-col overflow-hidden', className)}>
+      <CardContent className="p-5 flex-1 flex flex-col">
+        <div className="flex items-start justify-between gap-4 mb-4">
+          <div className="h-10 w-10 flex items-center justify-center rounded-lg border bg-background shrink-0 overflow-hidden">
+            {icon ? (
+              <img src={icon} className="h-6 w-6 object-contain" />
+            ) : (
+              <div className="h-6 w-6 bg-muted rounded-full" />
+            )}
+          </div>
+
+          <Switch checked={active} onCheckedChange={setActive} />
+        </div>
+
+        <div className="flex items-center gap-2 mb-1.5 mt-auto">
+          <h4 className="font-semibold text-base leading-none">{name}</h4>
+          {status === 'error' && (
+            <Badge variant="destructive" className="h-5 px-1.5 text-[10px]">
+              Error
+            </Badge>
+          )}
+        </div>
+        <p className="text-sm text-muted-foreground line-clamp-2 mt-1">{description}</p>
+      </CardContent>
+
+      {isConfigurable && (
+        <CardFooter className="px-5 py-3 border-t bg-muted/30 mt-auto">
+          <Button variant="ghost" size="sm" className="w-full text-xs" disabled={!active}>
+            Configure integration
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  )
+}

package/src/components/blocks/settings/integration-card/index.ts

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

package/src/components/blocks/settings/settings-section/SettingsSection.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface SettingsSectionProps {
+  title: string
+  description?: string
+  className?: string
+  children?: React.ReactNode
+}
+
+export function SettingsSection({ title, description, className, children }: SettingsSectionProps) {
+  return (
+    <div className={cn('grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10 py-6 border-b last:border-0', className)}>
+      <div className="md:col-span-1 flex flex-col gap-1">
+        <h3 className="text-base font-semibold leading-none tracking-tight">{title}</h3>
+        {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
+      </div>
+      <div className="md:col-span-2 flex flex-col gap-6">
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/settings/settings-section/index.ts

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

package/src/components/ui/accordion.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }