kyd-shared-badge 0.3.69 → 0.3.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.69",
+  "version": "0.3.71",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -22,7 +22,9 @@
     "@chatscope/chat-ui-kit-react": "^2.1.1",
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "ai": "5.0.47",
+    "framer-motion": "^12.23.24",
     "i18n-iso-countries": "^7.14.0",
+    "lucide-react": "^0.545.0",
     "next-auth": "^4.24.11",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",

package/src/connect/ConnectAccounts.tsx

@@ -3,6 +3,10 @@ import { useRouter } from 'next/navigation';
 import { ProviderIcon } from '../utils/provider';
 import { normalizeLinkedInInput } from './linkedin';
 import type { ConnectAccountsProps } from './types';
+import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink } from 'lucide-react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Button, Input, Spinner } from '../ui';
+import Link from 'next/link';
 
 function byPriority(a: string, b: string) {
   const pr = (id: string) => (id === 'github' ? 0 : id === 'linkedin' ? 1 : 2);
@@ -26,6 +30,8 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     onDisconnected,
     onError,
     className,
+    oauthClientIds,
+    providerPickCallback,
   } = props;
 
   const router = useRouter();
@@ -87,6 +93,11 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     }
   };
 
+  const setSelectedProviderIdAndCallback = (providerId: string | null) => {
+    setSelectedProviderId(providerId);
+    providerPickCallback(providerId);
+  };
+
   const onSubmitLink = async (providerId: string) => {
     const provider = providers.find(p => p.id.toLowerCase() === providerId.toLowerCase());
     if (!provider || !provider.endpoint) return;
@@ -104,7 +115,8 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
       });
       const data = await res.json().catch(() => ({}));
       if (!res.ok) throw new Error(data?.error || `Failed to sync ${provider.name} profile.`);
-      setSelectedProviderId(null);
+      setSelectedProviderIdAndCallback(null);
+
       setLinkUrl('');
       if (onConnected) onConnected(providerId);
     } catch (e) {
@@ -122,97 +134,242 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     // Lazy import builder to avoid circular deps
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const { buildOAuthUrl } = require('./oauth');
-    const url = buildOAuthUrl({ providerId: id, redirectUri, state });
+    const url = buildOAuthUrl({ providerId: id, redirectUri, state, clientIds: oauthClientIds });
     if (url) router.push(url);
   };
 
+  const selectedProvider = useMemo(
+    () => (selectedProviderId ? providers.find(p => p.id.toLowerCase() === selectedProviderId.toLowerCase()) : null),
+    [selectedProviderId, providers]
+  );
+
+  const handleConnectBack = () => {
+    setSelectedProviderIdAndCallback(null);
+    setLinkUrl('');
+  };
+
+  const fadeIn = {
+    hidden: { opacity: 0, y: 6 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.15 } },
+    exit: { opacity: 0, y: 6, transition: { duration: 0.1 } },
+  } as const;
+
   return (
-    <div className={className}>
-      {list.map((provider) => {
-        const providerId = provider.id;
-        const isConnected = connectedIds.has(providerId.toLowerCase());
-        const needsReconnect = reconnectIds.has(providerId.toLowerCase());
-        const isUrl = (provider.connectionType || 'url') === 'url' || provider.connectionType === 'link';
-        const isOauth = provider.connectionType === 'oauth';
-        return (
-          <div key={providerId} className="group flex items-center justify-between p-2 rounded-lg transition-colors hover:bg-[var(--icon-button-secondary)]/10">
-            <div className="flex items-center gap-3">
-              <ProviderIcon name={providerId} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
-              <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
-              {provider.beta ? (
-                <span
-                  className="ml-2 inline-block rounded-full px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200"
-                  style={{ verticalAlign: 'middle', letterSpacing: '0.05em' }}
+    <>
+      {selectedProvider ? (
+        <AnimatePresence>
+          <motion.div
+            key="connect-card"
+            className="rounded-xl border max-w-xl w-full"
+            style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
+            initial="hidden" animate="visible" exit="exit" variants={fadeIn}
+          >
+            <div className="sm:p-6 p-4">
+              <button onClick={handleConnectBack} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
+                <ArrowLeft className="w-4 h-4" />
+                Back
+              </button>
+              <div className="text-center">
+                <div className="flex justify-center mb-4">
+                  <ProviderIcon name={selectedProvider.id} className={`w-10 h-10 ${selectedProvider.iconColor || 'text-gray-500'}`} />
+                </div>
+                <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>
+                  {selectedProvider.connectionType === 'url' || (selectedProvider.connectionType || 'url') === 'link'
+                    ? `Use Public ${selectedProvider.name} Profile`
+                    : `Connect ${selectedProvider.name}`}
+                </h3>
+                <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto">
+                  {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link')
+                    ? (selectedProvider.placeholder || 'Enter your public profile URL.')
+                    : `Authorize with ${selectedProvider.name} to connect your account.`}
+                </p>
+              </div>
+
+              {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link') ? (
+                <motion.form
+                  onSubmit={(e) => { e.preventDefault(); onSubmitLink(selectedProvider.id); }}
+                  className="mt-6 space-y-4"
+                  initial="hidden" animate="visible" variants={fadeIn}
                 >
-                  Beta
-                </span>
-              ) : null}
+                  {selectedProvider.id === 'linkedin' && (
+                    <p className="sm:text-xs items-center text-[10px] text-[var(--text-secondary)] leading-relaxed max-w-xs mx-auto -mt-2">
+                      <Link
+                        href="https://www.linkedin.com/public-profile/settings"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline"
+                        style={{ color: 'var(--icon-accent)' }}
+                      >
+                        LinkedIn <ExternalLink className="size-3 inline-block ml-1 underline-0" />
+                      </Link>
+                      . This opens your public profile settings (you’ll see your shareable URL if you’re signed in).
+                    </p>
+                  )}
+                  <div className="relative">
+                    <LinkIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" />
+                    <Input
+                      type="url"
+                      value={linkUrl}
+                      onChange={(e) => setLinkUrl(e.target.value)}
+                      placeholder={selectedProvider.placeholder || 'https://example.com/your-profile'}
+                      required
+                      className="w-full border bg-transparent p-2 pl-9"
+                      style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                      onPaste={selectedProvider.id === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
+                      onBlur={selectedProvider.id === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
+                    />
+                  </div>
+                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                    <Button type="submit" className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors" disabled={isSubmitting}>
+                      {isSubmitting ? (
+                        <div className="flex items-center justify-center">
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                          Connecting...
+                        </div>
+                      ) : (
+                        'Connect'
+                      )}
+                    </Button>
+                  </motion.div>
+                </motion.form>
+              ) : (
+                <div className="mt-6">
+                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                    <Button onClick={() => onOAuth(selectedProvider.id)} className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors">
+                      <ExternalLink className="w-4 h-4 mr-2" />
+                      Connect with {selectedProvider.name}
+                    </Button>
+                  </motion.div>
+                </div>
+              )}
             </div>
+          </motion.div>
+        </AnimatePresence>
+      ) : (
+        <motion.div className="rounded-xl border max-w-lg" style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}} initial="hidden" animate="visible" variants={fadeIn}>
+          <div className="sm:p-6 p-4">
+            <h2 className="sm:text-xl text-base font-semibold" style={{ color: 'var(--text-main)'}}>Connect accounts</h2>
+            <p className="mt-2 sm:text-sm text-xs" style={{ color: 'var(--text-secondary)'}}>
+              Each connected account adds verified signals to your report. Connect more accounts to strengthen your score—then disconnect anytime.
+            </p>
+          </div>
+          <motion.div className="sm:px-6 px-4 sm:pb-6 pb-4 space-y-2" initial="hidden" animate="visible" variants={fadeIn}>
+            <div className="space-y-2">
+              {(() => {
+                const oauthList = list.filter(p => p.connectionType === 'oauth');
+                const urlList = list.filter(p => (p.connectionType || 'url') === 'url' || p.connectionType === 'link');
 
-            {isConnected ? (
-              <div className="relative flex items-center">
-                <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
-                  {/* Check icon via CSS/emoji to avoid extra deps */}
-                  <span className="w-4 h-4 inline-block">✔</span>
-                  <span className="text-sm font-medium">Connected</span>
-                </div>
-                <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
-                  <button
-                    onClick={() => onDisconnect(providerId)}
-                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-600 hover:text-red-700"
-                  >
-                    <span className="w-3 h-3 inline-block">✕</span>
-                    <span>Disconnect</span>
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <div className="flex items-center gap-2">
-                {selectedProviderId === providerId && isUrl ? (
-                  <form onSubmit={(e) => { e.preventDefault(); onSubmitLink(providerId); }} className="flex items-center gap-2">
-                    <div className="relative">
-                      <input
-                        type="url"
-                        value={linkUrl}
-                        onChange={(e) => setLinkUrl(e.target.value)}
-                        placeholder={provider.placeholder || 'https://example.com/your-profile'}
-                        required
-                        className="w-72 border bg-transparent p-2 text-sm rounded"
-                        style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
-                        onPaste={providerId === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
-                        onBlur={providerId === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
-                      />
+                const Row = (provider: typeof list[number]) => {
+                  const providerId = provider.id;
+                  const isConnected = connectedIds.has(providerId.toLowerCase());
+                  const needsReconnect = reconnectIds.has(providerId.toLowerCase());
+                  const isOauth = provider.connectionType === 'oauth'
+                  const connectedUrl = connected.find(c => c.id.toLowerCase() === providerId.toLowerCase())?.url;
+                  const betaFlag = () => (
+                    <span
+                      className="ml-2 inline-block rounded-full px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200"
+                      style={{ verticalAlign: 'middle', letterSpacing: '0.05em' }}
+                    >
+                      Beta
+                    </span>
+                  );
+
+                  return (
+                    <div key={providerId} className="group flex items-center justify-between p-2 rounded-lg transition-colors hover:bg-[var(--icon-button-secondary)]/10 transform transition-transform hover:-translate-y-px">
+                      <div className="flex items-center gap-3">
+
+                        {isConnected && connectedUrl ? (
+                          <Link href={connectedUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:underline">
+                            <ProviderIcon name={provider.id} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
+                            <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
+                          </Link>
+                        ) : (
+                          <div className="flex items-center gap-3">
+                            <ProviderIcon name={provider.id} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
+                            <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
+                          </div>
+                        )}
+                        {provider.beta ? betaFlag() : null}
+                      </div>
+
+                      {isConnected ? (
+                        <div className="relative flex items-center">
+                          <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
+                            <CheckCircle className="size-3 sm:size-4" />
+                            <span className="text-sm font-medium">Connected</span>
+                          </div>
+                          <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
+                            <button
+                              onClick={() => onDisconnect(providerId)}
+                              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-600 hover:text-red-700 hover:underline"
+                            >
+                              <Unlink className="size-3 sm:size-4" />
+                              <span>Disconnect</span>
+                            </button>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2">
+                          <>
+                            <Button
+                              onClick={() => setSelectedProviderIdAndCallback(providerId)}
+                              className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
+                            >
+                              {isOauth ? (
+                                <Link2 className="size-3 sm:size-4" />
+                              ) : (
+                                <LinkIcon className="size-3 sm:size-4" />
+                              )}
+                              <span className="sm:text-base text-sm">Connect</span>
+                            </Button>
+                            {needsReconnect && (
+                              <Button
+                                onClick={() => onDisconnect(providerId)}
+                                className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
+                                style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                              >
+                                <Unlink className="size-3 sm:size-4" />
+                                <span>Remove</span>
+                              </Button>
+                            )}
+                          </>
+                        </div>
+                      )}
                     </div>
-                    <button type="submit" disabled={isSubmitting} className="px-3 py-2 rounded bg-[var(--icon-accent)] text-white">
-                      {isSubmitting ? 'Connecting…' : 'Connect'}
-                    </button>
-                  </form>
-                ) : (
+                  );
+                };
+
+                return (
                   <>
-                    <button
-                      onClick={() => (isOauth ? onOAuth(providerId) : setSelectedProviderId(providerId))}
-                      className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded"
-                    >
-                      <span className="sm:text-base text-sm">Connect</span>
-                    </button>
-                    {needsReconnect && (
-                      <button
-                        onClick={() => onDisconnect(providerId)}
-                        className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
-                        style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
-                      >
-                        <span className="w-3 h-3 inline-block">✕</span>
-                        <span>Remove</span>
-                      </button>
-                    )}
+                    {oauthList.length ? (
+                      <>
+                        <div className="flex items-center my-2">
+                          <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                          <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>OAuth</span>
+                          <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                        </div>
+                        {oauthList.map(p => Row(p))}
+                      </>
+                    ) : null}
+
+                    {urlList.length ? (
+                      <>
+                        <div className="flex items-center my-2">
+                          <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                          <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>Public Urls</span>
+                          <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                        </div>
+                        {urlList.map(p => Row(p))}
+                      </>
+                    ) : null}
                   </>
-                )}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
+                );
+              })()}
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </>
   );
 }
 

package/src/connect/oauth.ts

@@ -1,15 +1,16 @@
 type KnownProvider = 'github' | 'gitlab' | 'stackoverflow';
 
 const env = (key: string): string | undefined => {
-  // Access process.env directly; Next.js will inline NEXT_PUBLIC_* at build time
-  try { return (process.env as any)[key]; } catch { return undefined; }
+  // Use globalThis to avoid hard dependency on Node 'process' types/environ
+  try {
+    const g = globalThis as unknown as { process?: { env?: Record<string, string | undefined> } };
+    return g?.process?.env?.[key];
+  } catch {
+    return undefined;
+  }
 };
 
-const CLIENT_IDS: Record<KnownProvider, string | undefined> = {
-  github: env('NEXT_PUBLIC_GITHUB_CLIENT_ID'),
-  gitlab: env('NEXT_PUBLIC_GITLAB_CLIENT_ID'),
-  stackoverflow: env('NEXT_PUBLIC_STACKOVERFLOW_CLIENT_ID'),
-};
+export type OAuthClientIds = Partial<Record<KnownProvider, string>>;
 
 const DEFAULT_SCOPES: Record<KnownProvider, string> = {
   github: 'read:user,repo',
@@ -22,9 +23,13 @@ export function buildOAuthUrl(params: {
   redirectUri: string;
   state?: string;
   scopeOverride?: string;
+  clientIds?: OAuthClientIds;
 }): string {
   const id = (params.providerId || '').toLowerCase() as KnownProvider;
-  const clientId = CLIENT_IDS[id as KnownProvider];
+  const clientId = (params.clientIds && params.clientIds[id]) || env(
+    id === 'github' ? 'NEXT_PUBLIC_GITHUB_CLIENT_ID' : id === 'gitlab' ? 'NEXT_PUBLIC_GITLAB_CLIENT_ID' : 'NEXT_PUBLIC_STACKOVERFLOW_CLIENT_ID'
+  );
+  // clientId should be inlined at build-time for NEXT_PUBLIC_*
   const scope = params.scopeOverride ?? DEFAULT_SCOPES[id as KnownProvider] ?? '';
   const redirect = encodeURIComponent(params.redirectUri);
   const state = params.state ? `&state=${encodeURIComponent(params.state)}` : '';

package/src/connect/types.ts

@@ -27,10 +27,12 @@ export interface ConnectAccountsProps {
   buildOAuthState?: () => Record<string, string | number | boolean> | string | undefined;
   stateFormat?: StateFormat;
   redirectUriOverrides?: RedirectUriOverrides;
+  oauthClientIds?: Partial<Record<'github' | 'gitlab' | 'stackoverflow', string>>;
   onConnected?: (providerId: string) => void;
   onDisconnected?: (providerId: string) => void;
   onError?: (message: string) => void;
   className?: string;
+  providerPickCallback: (providerId: string | null) => void;
 }
 
 

package/src/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col sm:p-4 p-4", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sm:pt-2 sm:pb-4 sm:px-4 pb-3 px-4 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center sm:p-6 p-2 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/ui/index.ts

@@ -0,0 +1,4 @@
+export * from './button';
+export * from './card';
+export * from './input';
+export * from './spinner';

package/src/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm text-xs",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/ui/spinner.tsx

@@ -0,0 +1,12 @@
+'use client'
+import React from 'react'
+
+export function Spinner() {
+  return (
+    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[var(--icon-accent-hover)]"></div>
+  )
+}
+
+export default Spinner
+
+