@reinvented/design 0.3.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reinvented/design",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "type": "module",
   "main": "./src/index.ts",
   "exports": {
@@ -22,36 +22,70 @@
     "DESIGN_GUIDE.md"
   ],
   "scripts": {
-    "build": "vue-tsc --noEmit",
+    "build": "tsc --noEmit",
     "lint": "eslint src"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@unovis/ts": "^1.6.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.460.0",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^9.14.0",
+    "react-hook-form": "^7.72.0",
+    "react-resizable-panels": "^4.8.0",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^2.6.0",
-    "lucide-vue-next": "^0.460.0",
-    "radix-vue": "^1.9.0",
-    "@vueuse/core": "^11.0.0",
-    "embla-carousel-vue": "^8.5.0",
-    "vaul-vue": "^0.2.0",
-    "vee-validate": "^4.14.0",
-    "@vee-validate/zod": "^4.14.0",
-    "zod": "^3.23.0",
-    "vue-sonner": "^1.2.0",
-    "v-calendar": "^3.1.0",
-    "@tanstack/vue-table": "^8.21.0",
-    "eslint-plugin-vue": "^9.28.0",
-    "vue-eslint-parser": "^9.4.0"
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.23.0"
   },
   "devDependencies": {
-    "vue": "^3.5.0",
-    "typescript": "^5.6.0",
-    "vue-tsc": "^2.1.0",
-    "tailwindcss": "^3.4.0",
+    "@types/google.maps": "^3.58.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.0"
+    "postcss": "^8.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.6.0"
   }
 }

package/src/components/blocks/auth/auth-card/AuthCard.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
+
+interface AuthCardProps {
+  title: string
+  description?: string
+  footerText?: string
+  footerLinkText?: string
+  footerLinkHref?: string
+  className?: string
+  children?: React.ReactNode
+  footer?: React.ReactNode
+}
+
+export function AuthCard({
+  title,
+  description,
+  footerText,
+  footerLinkText,
+  footerLinkHref,
+  className,
+  children,
+  footer,
+}: AuthCardProps) {
+  const showFooter = footerText || footer
+
+  return (
+    <Card className={cn('w-full mx-auto shadow-sm', className)}>
+      <CardHeader className="space-y-1 text-center pb-6">
+        <CardTitle className="text-2xl font-semibold tracking-tight">{title}</CardTitle>
+        {description && (
+          <CardDescription className="text-[13px]">
+            {description}
+          </CardDescription>
+        )}
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        {children}
+      </CardContent>
+      {showFooter && (
+        <CardFooter className="flex flex-wrap items-center justify-center gap-1 text-sm text-muted-foreground pt-2">
+          {footer ? (
+            footer
+          ) : (
+            <>
+              {footerText}
+              {footerLinkText && footerLinkHref && (
+                <a
+                  href={footerLinkHref}
+                  className="font-medium underline underline-offset-4 hover:text-primary transition-colors"
+                >
+                  {footerLinkText}
+                </a>
+              )}
+            </>
+          )}
+        </CardFooter>
+      )}
+    </Card>
+  )
+}

package/src/components/blocks/auth/auth-card/index.ts

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

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

@@ -0,0 +1,3 @@
+export * from './auth-card'
+export * from './social-login'
+export * from './two-factor'

package/src/components/blocks/auth/social-login/SocialLoginGroup.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Github } from 'lucide-react'
+
+interface SocialLoginGroupProps {
+  providers?: ('github' | 'google')[]
+  layout?: 'row' | 'column'
+  className?: string
+}
+
+export function SocialLoginGroup({
+  providers,
+  layout,
+  className,
+}: SocialLoginGroupProps) {
+  const activeProviders = providers || ['github', 'google']
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <div
+        className={cn(
+          'gap-3',
+          layout === 'column' ? 'flex flex-col' : 'grid grid-cols-2'
+        )}
+      >
+        {activeProviders.includes('github') && (
+          <Button variant="outline" className="w-full bg-background">
+            <Github className="mr-2 h-4 w-4" />
+            Github
+          </Button>
+        )}
+        {activeProviders.includes('google') && (
+          <Button variant="outline" className="w-full bg-background">
+            <svg
+              className="mr-2 h-4 w-4"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                fill="#4285F4"
+              />
+              <path
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                fill="#34A853"
+              />
+              <path
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                fill="#FBBC05"
+              />
+              <path
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                fill="#EA4335"
+              />
+            </svg>
+            Google
+          </Button>
+        )}
+      </div>
+
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t border-border"></span>
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-card px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/auth/social-login/index.ts

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

package/src/components/blocks/auth/two-factor/TwoFactorForm.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/ui/input-otp'
+
+interface TwoFactorFormProps {
+  email?: string
+  className?: string
+  onComplete?: (value: string) => void
+}
+
+export function TwoFactorForm({ email, className, onComplete }: TwoFactorFormProps) {
+  const [value, setValue] = useState("")
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      <div className="space-y-2 text-center text-sm">
+        {email && (
+          <p className="text-muted-foreground">
+            Please enter the 6-digit code sent to <span className="font-medium text-foreground">{email}</span>.
+          </p>
+        )}
+      </div>
+
+      <div className="flex justify-center">
+        <InputOTP
+          maxLength={6}
+          value={value}
+          onChange={(val) => setValue(val)}
+          onComplete={(val) => onComplete?.(val)}
+        >
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+
+      <Button className="w-full" disabled={value.length !== 6}>
+        Verify Application
+      </Button>
+
+      <div className="text-center text-sm text-muted-foreground">
+        Didn&apos;t receive a code?{' '}
+        <Button variant="link" className="p-0 h-auto font-medium text-primary px-1 underline-offset-4">
+          Resend
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/auth/two-factor/index.ts

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

package/src/components/blocks/communication/activity-item/ActivityItem.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+export function ActivityItem({
+  className,
+  children,
+}: {
+  className?: string
+  children?: React.ReactNode
+}) {
+  return (
+    <div className={cn('flex gap-4 relative', className)}>
+      <div className="absolute left-4 top-8 bottom-[-16px] w-px bg-border -z-10 hidden last:!hidden sm:block" />
+      {children}
+    </div>
+  )
+}

package/src/components/blocks/communication/activity-item/ActivityItemAvatar.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import type { HTMLAttributes } from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { cn } from '@/lib/utils'
+
+interface ActivityItemAvatarProps {
+  src?: string
+  fallback?: string
+  className?: HTMLAttributes<HTMLElement>['className']
+}
+
+export function ActivityItemAvatar({ src, fallback, className }: ActivityItemAvatarProps) {
+  return (
+    <div className="relative z-10 bg-background pb-2">
+      <Avatar className={cn('h-8 w-8 ring-2 ring-background', className)}>
+        {src && <AvatarImage src={src} />}
+        {fallback && <AvatarFallback>{fallback}</AvatarFallback>}
+      </Avatar>
+    </div>
+  )
+}

package/src/components/blocks/communication/activity-item/ActivityItemContent.tsx

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

package/src/components/blocks/communication/activity-item/index.ts

@@ -0,0 +1,3 @@
+export * from './ActivityItem'
+export * from './ActivityItemAvatar'
+export * from './ActivityItemContent'

package/src/components/blocks/communication/chat-bubble/ChatBubble.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'sent' | 'received'
+}
+
+export function ChatBubble({ variant, className, children, ...props }: ChatBubbleProps) {
+  return (
+    <div
+      className={cn(
+        'flex w-full gap-2',
+        variant === 'sent' ? 'flex-row-reverse' : 'flex-row',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/blocks/communication/chat-bubble/ChatBubbleAvatar.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import type { HTMLAttributes } from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { cn } from '@/lib/utils'
+
+interface ChatBubbleAvatarProps {
+  src?: string
+  fallback?: string
+  className?: HTMLAttributes<HTMLElement>['className']
+}
+
+export function ChatBubbleAvatar({ src, fallback, className }: ChatBubbleAvatarProps) {
+  return (
+    <Avatar className={cn('h-8 w-8 shrink-0', className)}>
+      {src && <AvatarImage src={src} />}
+      {fallback && <AvatarFallback>{fallback}</AvatarFallback>}
+    </Avatar>
+  )
+}

package/src/components/blocks/communication/chat-bubble/ChatBubbleMessage.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface ChatBubbleMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'sent' | 'received'
+}
+
+export function ChatBubbleMessage({
+  variant,
+  className,
+  children,
+  ...props
+}: ChatBubbleMessageProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-1 max-w-[80%]',
+        variant === 'sent' ? 'items-end' : 'items-start',
+        className,
+      )}
+      {...props}
+    >
+      <div
+        className={cn(
+          'rounded-2xl px-4 py-2 text-sm',
+          variant === 'sent'
+            ? 'bg-primary text-primary-foreground rounded-tr-sm'
+            : 'bg-muted text-foreground rounded-tl-sm',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/communication/chat-bubble/ChatBubbleTimestamp.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+interface ChatBubbleTimestampProps extends React.HTMLAttributes<HTMLSpanElement> {
+  timestamp: string
+  className?: string
+}
+
+export function ChatBubbleTimestamp({ timestamp, className, ...props }: ChatBubbleTimestampProps) {
+  return (
+    <span className={cn('text-[10px] text-muted-foreground px-1 mt-1 block', className)} {...props}>
+      {timestamp}
+    </span>
+  )
+}

package/src/components/blocks/communication/chat-bubble/index.ts

@@ -0,0 +1,4 @@
+export * from './ChatBubble'
+export * from './ChatBubbleAvatar'
+export * from './ChatBubbleMessage'
+export * from './ChatBubbleTimestamp'

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

@@ -0,0 +1,2 @@
+export * from './chat-bubble'
+export * from './activity-item'

package/src/components/blocks/content/article-header/ArticleHeader.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import type { HTMLAttributes } from 'react'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+
+interface ArticleHeaderProps {
+  title: string
+  description?: string
+  authorName: string
+  authorAvatar?: string
+  authorRole?: string
+  date: string
+  readTime?: string
+  tags?: string[]
+  className?: HTMLAttributes<HTMLElement>['className']
+}
+
+export function ArticleHeader({
+  title,
+  description,
+  authorName,
+  authorAvatar,
+  authorRole,
+  date,
+  readTime,
+  tags,
+  className,
+}: ArticleHeaderProps) {
+  return (
+    <header className={cn('flex flex-col gap-6 max-w-3xl mx-auto py-8', className)}>
+      {tags?.length ? (
+        <div className="flex flex-wrap gap-2">
+          {tags.map((tag) => (
+            <Badge key={tag} variant="secondary">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+      ) : null}
+
+      <div className="space-y-4">
+        <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight lg:text-5xl leading-tight text-foreground">
+          {title}
+        </h1>
+        {description && (
+          <p className="text-xl text-muted-foreground leading-relaxed">
+            {description}
+          </p>
+        )}
+      </div>
+
+      <div className="flex items-center gap-4 mt-4 border-t pt-6">
+        <Avatar className="h-12 w-12">
+          {authorAvatar && <AvatarImage src={authorAvatar} />}
+          <AvatarFallback>{authorName.substring(0, 2).toUpperCase()}</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-col">
+          <span className="font-semibold text-foreground leading-none mb-1.5">{authorName}</span>
+          <div className="flex items-center text-sm text-muted-foreground gap-2">
+            <span>{date}</span>
+            {readTime && (
+              <>
+                <span>·</span>
+                <span>{readTime}</span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}

package/src/components/blocks/content/article-header/index.ts

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

package/src/components/blocks/content/author-card/AuthorCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+interface AuthorCardProps {
+  name: string
+  role?: string
+  bio?: string
+  avatar?: string
+  className?: HTMLAttributes<HTMLElement>['className']
+  action?: ReactNode
+}
+
+export function AuthorCard({ name, role, bio, avatar, className, action }: AuthorCardProps) {
+  return (
+    <Card className={cn('overflow-hidden max-w-3xl mx-auto mt-12 mb-8 bg-muted/30 border-none shadow-none', className)}>
+      <CardContent className="p-6 sm:p-8 flex flex-col sm:flex-row gap-6 items-start sm:items-center">
+        <Avatar className="h-20 w-20 border-2 border-background shadow-sm shrink-0">
+          {avatar && <AvatarImage src={avatar} />}
+          <AvatarFallback className="text-xl">{name.substring(0, 2).toUpperCase()}</AvatarFallback>
+        </Avatar>
+
+        <div className="flex-1 space-y-2">
+          <div>
+            <h4 className="text-xl font-bold">{name}</h4>
+            {role && <p className="text-sm font-medium text-primary mt-0.5">{role}</p>}
+          </div>
+          {bio && (
+            <p className="text-sm text-muted-foreground leading-relaxed max-w-xl">
+              {bio}
+            </p>
+          )}
+        </div>
+
+        <div className="shrink-0 w-full sm:w-auto">
+          {action ?? (
+            <Button variant="outline" className="w-full sm:w-auto">Follow</Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/blocks/content/author-card/index.ts

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

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

@@ -0,0 +1,3 @@
+export * from './article-header'
+export * from './rich-text'
+export * from './author-card'

package/src/components/blocks/content/rich-text/RichTextContent.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+interface RichTextContentProps {
+  className?: HTMLAttributes<HTMLElement>['className']
+  children?: ReactNode
+}
+
+export function RichTextContent({ className, children }: RichTextContentProps) {
+  return (
+    <div
+      className={cn(
+        'prose prose-slate dark:prose-invert max-w-3xl mx-auto',
+        'prose-headings:font-bold prose-headings:tracking-tight prose-headings:text-foreground',
+        'prose-p:text-muted-foreground prose-p:leading-8',
+        'prose-a:text-primary prose-a:underline-offset-4 hover:prose-a:text-primary/80',
+        'prose-img:rounded-xl prose-img:border prose-img:shadow-sm',
+        'prose-blockquote:border-l-primary prose-blockquote:bg-muted/50 prose-blockquote:px-5 prose-blockquote:py-2 prose-blockquote:rounded-r-lg prose-blockquote:not-italic prose-blockquote:text-foreground font-normal',
+        'prose-strong:text-foreground prose-code:text-foreground prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/blocks/content/rich-text/index.ts

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

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

@@ -0,0 +1,2 @@
+export * from './kanban'
+export * from './tree-view'

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+export function KanbanBoard({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('flex gap-6 overflow-x-auto pb-4 pt-2 -mx-4 px-4 sm:mx-0 sm:px-0', className)} {...props}>
+      {children}
+    </div>
+  )
+}