ui-lab-registry 0.3.45 → 0.3.46

package/src/elements/AI/Chat/variations/02-with-actions/layout/ChatContainerWithActions.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-interface ChatContainerWithActionsProps {
-  children: React.ReactNode;
-}
-
-export function ChatContainerWithActions({ children }: ChatContainerWithActionsProps) {
-  return (
-    <div className="flex flex-col h-full bg-background-800 border border-background-700 rounded-md overflow-hidden">
-      {children}
-    </div>
-  );
-}

package/src/elements/AI/Chat/variations/02-with-actions/layout/ChatInputWithActions.tsx

@@ -1,35 +0,0 @@
-import React, { useState } from 'react';
-
-interface ChatInputWithActionsProps {
-  onSendMessage: (message: string) => void;
-}
-
-export function ChatInputWithActions({ onSendMessage }: ChatInputWithActionsProps) {
-  const [input, setInput] = useState('');
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (input.trim()) {
-      onSendMessage(input);
-      setInput('');
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="flex gap-2">
-      <input
-        type="text"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        placeholder="Type a message..."
-        className="flex-1 bg-background-700 border border-background-600 rounded px-3 py-2 text-sm text-foreground-50 placeholder-foreground-400 focus:outline-none focus:border-accent-500"
-      />
-      <button
-        type="submit"
-        className="px-4 py-2 bg-accent-500 text-foreground-50 rounded font-medium hover:bg-accent-600 transition-colors text-sm"
-      >
-        Send
-      </button>
-    </form>
-  );
-}

package/src/elements/AI/Chat/variations/02-with-actions/layout/ChatMessage.tsx

@@ -1,20 +0,0 @@
-interface ChatMessageProps {
-  message: string;
-  sender: 'user' | 'ai';
-}
-
-export function ChatMessage({ message, sender }: ChatMessageProps) {
-  return (
-    <div className={`flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`}>
-      <div
-        className={`max-w-xs px-4 py-2 rounded-lg text-sm ${
-          sender === 'user'
-            ? 'bg-accent-500 text-foreground-50'
-            : 'bg-background-700 text-foreground-300'
-        }`}
-      >
-        {message}
-      </div>
-    </div>
-  );
-}

package/src/elements/AI/Chat/variations/index.ts

@@ -1,18 +0,0 @@
-// Export all variation components
-export { BasicChat } from './01-basic/index.js';
-export { ChatWithActions } from './02-with-actions/index.js';
-
-// Type for all variations
-export type ChatVariations = 'BasicChat' | 'ChatWithActions';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'chat-basic': { key: '01-basic', export: 'BasicChat' },
-  'chat-actions': { key: '02-with-actions', export: 'ChatWithActions' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicChat,
-  '02-with-actions': async () => (await import('./02-with-actions')).ChatWithActions,
-} as const;

package/src/elements/Documentation/CopyPage/variations/01-basic/index.tsx

@@ -1,55 +0,0 @@
-"use client"
-import React from 'react';
-import { CopyButton } from './layout/CopyButton.js';
-
-export function BasicCopyPage() {
-  return (
-    <div className="min-h-screen bg-background-950 p-8">
-      <div className="max-w-4xl mx-auto">
-        <div className="flex items-center justify-between mb-8">
-          <h1 className="text-3xl font-bold text-foreground-50">Documentation Page</h1>
-          <CopyButton />
-        </div>
-
-        <div className="bg-background-800 rounded-md border border-background-700 p-8">
-          <div className="prose prose-invert space-y-6">
-            <section>
-              <h2 className="text-xl font-semibold text-foreground-50 mb-4">Overview</h2>
-              <div className="space-y-2 text-foreground-300">
-                <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-                <div className="h-3 bg-background-700 rounded w-5/6 opacity-50" />
-                <div className="h-3 bg-background-700 rounded w-4/5 opacity-50" />
-              </div>
-            </section>
-
-            <section>
-              <h2 className="text-xl font-semibold text-foreground-50 mb-4">Getting Started</h2>
-              <div className="space-y-2 text-foreground-300">
-                <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-                <div className="h-3 bg-background-700 rounded w-5/6 opacity-50" />
-              </div>
-            </section>
-
-            <section>
-              <h2 className="text-xl font-semibold text-foreground-50 mb-4">Features</h2>
-              <div className="space-y-3">
-                <div className="flex gap-3">
-                  <div className="w-2 h-2 rounded-full bg-accent-500 mt-1.5 flex-shrink-0" />
-                  <div className="space-y-1">
-                    <div className="h-3 bg-background-700 rounded w-32 opacity-50" />
-                  </div>
-                </div>
-                <div className="flex gap-3">
-                  <div className="w-2 h-2 rounded-full bg-accent-500 mt-1.5 flex-shrink-0" />
-                  <div className="space-y-1">
-                    <div className="h-3 bg-background-700 rounded w-40 opacity-50" />
-                  </div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/elements/Documentation/CopyPage/variations/01-basic/layout/CopyButton.tsx

@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-
-export function CopyButton() {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = async () => {
-    try {
-      const text = document.body.innerText;
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      console.error('Failed to copy');
-    }
-  };
-
-  return (
-    <button
-      onClick={handleCopy}
-      className={`px-4 py-2 rounded font-medium transition-colors flex items-center gap-2 ${
-        copied
-          ? 'bg-success-500 text-foreground-50'
-          : 'bg-accent-500 text-foreground-50 hover:bg-accent-600'
-      }`}
-    >
-      <span>{copied ? '✓' : '📋'}</span>
-      {copied ? 'Copied!' : 'Copy Page'}
-    </button>
-  );
-}

package/src/elements/Documentation/CopyPage/variations/02-with-success/index.tsx

@@ -1,63 +0,0 @@
-"use client"
-import React, { useState } from 'react';
-import { CopyButtonWithToast } from './layout/CopyButtonWithToast.js';
-
-export function CopyPageWithSuccess() {
-  const [notification, setNotification] = useState<string | null>(null);
-
-  const handleCopySuccess = () => {
-    setNotification('Page content copied to clipboard!');
-    setTimeout(() => setNotification(null), 3000);
-  };
-
-  return (
-    <div className="min-h-screen bg-background-950 p-8">
-      <div className="max-w-4xl mx-auto">
-        <div className="flex items-center justify-between mb-8">
-          <h1 className="text-3xl font-bold text-foreground-50">Share & Copy Documentation</h1>
-          <CopyButtonWithToast onCopySuccess={handleCopySuccess} />
-        </div>
-
-        {notification && (
-          <div className="mb-6 px-4 py-3 bg-success-500 bg-opacity-20 border border-success-500 rounded-md text-success-200 flex items-center gap-3">
-            <span>✓</span>
-            <span>{notification}</span>
-          </div>
-        )}
-
-        <div className="bg-background-800 rounded-md border border-background-700 p-8">
-          <div className="space-y-6">
-            <section>
-              <h2 className="text-xl font-semibold text-foreground-50 mb-4">Content Section 1</h2>
-              <div className="space-y-2 text-foreground-300">
-                <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-                <div className="h-3 bg-background-700 rounded w-5/6 opacity-50" />
-              </div>
-            </section>
-
-            <div className="border-t border-background-700 pt-6" />
-
-            <section>
-              <h2 className="text-xl font-semibold text-foreground-50 mb-4">Content Section 2</h2>
-              <div className="space-y-2 text-foreground-300">
-                <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-                <div className="h-3 bg-background-700 rounded w-4/5 opacity-50" />
-              </div>
-            </section>
-
-            <div className="border-t border-background-700 pt-6" />
-
-            <section>
-              <h2 className="text-xl font-semibold text-foreground-50 mb-4">Content Section 3</h2>
-              <div className="space-y-2 text-foreground-300">
-                <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-                <div className="h-3 bg-background-700 rounded w-5/6 opacity-50" />
-                <div className="h-3 bg-background-700 rounded w-3/4 opacity-50" />
-              </div>
-            </section>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/elements/Documentation/CopyPage/variations/02-with-success/layout/CopyButtonWithToast.tsx

@@ -1,33 +0,0 @@
-import React, { useState } from 'react';
-
-interface CopyButtonWithToastProps {
-  onCopySuccess?: () => void;
-}
-
-export function CopyButtonWithToast({ onCopySuccess }: CopyButtonWithToastProps) {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleCopy = async () => {
-    setIsLoading(true);
-    try {
-      const text = document.body.innerText;
-      await navigator.clipboard.writeText(text);
-      onCopySuccess?.();
-    } catch {
-      console.error('Failed to copy');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <button
-      onClick={handleCopy}
-      disabled={isLoading}
-      className="px-4 py-2 bg-accent-500 text-foreground-50 rounded font-medium hover:bg-accent-600 transition-colors disabled:opacity-50 flex items-center gap-2"
-    >
-      <span>{isLoading ? '...' : '📋'}</span>
-      {isLoading ? 'Copying...' : 'Copy Page'}
-    </button>
-  );
-}

package/src/elements/Documentation/CopyPage/variations/index.ts

@@ -1,18 +0,0 @@
-// Export all variation components
-export { BasicCopyPage } from './01-basic/index.js';
-export { CopyPageWithSuccess } from './02-with-success/index.js';
-
-// Type for all variations
-export type CopyPageVariations = 'BasicCopyPage' | 'CopyPageWithSuccess';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'copy-page-basic': { key: '01-basic', export: 'BasicCopyPage' },
-  'copy-page-success': { key: '02-with-success', export: 'CopyPageWithSuccess' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicCopyPage,
-  '02-with-success': async () => (await import('./02-with-success')).CopyPageWithSuccess,
-} as const;

package/src/elements/Documentation/NextArticle/variations/01-basic/index.tsx

@@ -1,42 +0,0 @@
-"use client"
-import React from 'react';
-import { NextArticleCard } from './layout/NextArticleCard.js';
-
-export function BasicNextArticle() {
-  const articles = [
-    {
-      title: 'Getting Started with Components',
-      description: 'Learn how to install and use UI Lab components in your project.',
-      href: '#getting-started',
-    },
-    {
-      title: 'Advanced Component Patterns',
-      description: 'Explore advanced patterns and best practices for using components.',
-      href: '#advanced',
-    },
-  ];
-
-  return (
-    <div className="min-h-screen bg-background-950 p-8">
-      <div className="max-w-4xl mx-auto space-y-12">
-        <div>
-          <h2 className="text-2xl font-bold text-foreground-50 mb-6">Documentation Sections</h2>
-          <div className="space-y-6">
-            {articles.map((article, index) => (
-              <div key={index}>
-                <div className="bg-background-800 rounded-md border border-background-700 p-8 mb-4">
-                  <div className="space-y-2 mb-6">
-                    <div className="h-4 bg-background-700 rounded w-3/4 opacity-50" />
-                    <div className="h-3 bg-background-700 rounded w-5/6 opacity-40" />
-                    <div className="h-3 bg-background-700 rounded w-4/5 opacity-40" />
-                  </div>
-                </div>
-                <NextArticleCard {...article} />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/elements/Documentation/NextArticle/variations/01-basic/layout/NextArticleCard.tsx

@@ -1,27 +0,0 @@
-interface NextArticleCardProps {
-  title: string;
-  description: string;
-  href: string;
-}
-
-export function NextArticleCard({ title, description, href }: NextArticleCardProps) {
-  return (
-    <a
-      href={href}
-      className="block bg-background-700 border border-background-600 rounded-md p-4 hover:border-accent-500 hover:bg-background-700/80 transition-colors group"
-    >
-      <div className="flex items-center justify-between">
-        <div className="flex-1">
-          <div className="text-sm text-foreground-400 mb-1">Next Article</div>
-          <h3 className="text-lg font-semibold text-foreground-50 mb-2 group-hover:text-accent-400 transition-colors">
-            {title}
-          </h3>
-          <p className="text-sm text-foreground-400">{description}</p>
-        </div>
-        <div className="ml-4 text-xl text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0">
-          →
-        </div>
-      </div>
-    </a>
-  );
-}

package/src/elements/Documentation/NextArticle/variations/02-with-icon/index.tsx

@@ -1,44 +0,0 @@
-"use client"
-import React from 'react';
-import { NextArticleWithIconCard } from './layout/NextArticleWithIconCard.js';
-
-export function NextArticleWithIcon() {
-  const articles = [
-    {
-      icon: '🚀',
-      title: 'Quick Start Guide',
-      description: 'Get up and running in 5 minutes with our quick start guide.',
-      href: '#quickstart',
-      category: 'Getting Started',
-    },
-    {
-      icon: '⚙️',
-      title: 'Configuration Options',
-      description: 'Learn about all available configuration options and customization.',
-      href: '#config',
-      category: 'Advanced',
-    },
-  ];
-
-  return (
-    <div className="min-h-screen bg-background-950 p-8">
-      <div className="max-w-4xl mx-auto space-y-12">
-        <h2 className="text-2xl font-bold text-foreground-50 mb-8">Continue Reading</h2>
-
-        <div className="space-y-4">
-          {articles.map((article, index) => (
-            <NextArticleWithIconCard key={index} {...article} />
-          ))}
-        </div>
-
-        <div className="bg-background-800 rounded-md border border-background-700 p-8 mt-12">
-          <div className="space-y-3">
-            <div className="h-4 bg-background-700 rounded w-2/3 opacity-50" />
-            <div className="h-3 bg-background-700 rounded w-full opacity-40" />
-            <div className="h-3 bg-background-700 rounded w-5/6 opacity-40" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/elements/Documentation/NextArticle/variations/02-with-icon/layout/NextArticleWithIconCard.tsx

@@ -1,34 +0,0 @@
-interface NextArticleWithIconCardProps {
-  icon: string;
-  title: string;
-  description: string;
-  category: string;
-  href: string;
-}
-
-export function NextArticleWithIconCard({
-  icon,
-  title,
-  description,
-  category,
-  href,
-}: NextArticleWithIconCardProps) {
-  return (
-    <a
-      href={href}
-      className="flex items-start gap-4 p-4 bg-background-700 border border-background-600 rounded-md hover:border-accent-500 hover:bg-background-700/80 transition-colors group"
-    >
-      <div className="text-3xl flex-shrink-0 mt-1">{icon}</div>
-      <div className="flex-1 min-w-0">
-        <div className="text-sm text-accent-400 font-medium mb-1">{category}</div>
-        <h3 className="text-lg font-semibold text-foreground-50 mb-1 group-hover:text-accent-400 transition-colors">
-          {title}
-        </h3>
-        <p className="text-sm text-foreground-400">{description}</p>
-      </div>
-      <div className="text-foreground-400 group-hover:text-accent-400 transition-colors flex-shrink-0 text-lg">
-        →
-      </div>
-    </a>
-  );
-}

package/src/elements/Documentation/NextArticle/variations/index.ts

@@ -1,18 +0,0 @@
-// Export all variation components
-export { BasicNextArticle } from './01-basic/index.js';
-export { NextArticleWithIcon } from './02-with-icon/index.js';
-
-// Type for all variations
-export type NextArticleVariations = 'BasicNextArticle' | 'NextArticleWithIcon';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'next-article-basic': { key: '01-basic', export: 'BasicNextArticle' },
-  'next-article-icon': { key: '02-with-icon', export: 'NextArticleWithIcon' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicNextArticle,
-  '02-with-icon': async () => (await import('./02-with-icon')).NextArticleWithIcon,
-} as const;

package/src/elements/Documentation/TOC/variations/01-basic/index.tsx

@@ -1,61 +0,0 @@
-"use client"
-import React from 'react';
-import { TableOfContents } from './layout/TableOfContents.js';
-
-export function BasicTOC() {
-  return (
-    <div className="flex gap-8 min-h-screen bg-background-950 p-8">
-      <div className="flex-1">
-        <article className="space-y-8">
-          <section>
-            <h2 className="text-2xl font-bold text-foreground-50 mb-4">Introduction</h2>
-            <p className="text-foreground-300 mb-4">
-              This document provides a comprehensive guide to getting started with UI Lab components.
-            </p>
-            <div className="space-y-3">
-              <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-              <div className="h-3 bg-background-700 rounded w-5/6 opacity-50" />
-              <div className="h-3 bg-background-700 rounded w-4/5 opacity-50" />
-            </div>
-          </section>
-
-          <section>
-            <h3 className="text-xl font-bold text-foreground-50 mb-4">Overview</h3>
-            <div className="space-y-3">
-              <div className="h-3 bg-background-700 rounded w-full opacity-40" />
-              <div className="h-3 bg-background-700 rounded w-5/6 opacity-40" />
-            </div>
-          </section>
-
-          <section>
-            <h3 className="text-xl font-bold text-foreground-50 mb-4">Getting Started</h3>
-            <div className="space-y-3">
-              <div className="h-3 bg-background-700 rounded w-full opacity-40" />
-              <div className="h-3 bg-background-700 rounded w-4/5 opacity-40" />
-            </div>
-          </section>
-
-          <section>
-            <h2 className="text-2xl font-bold text-foreground-50 mb-4">Installation</h2>
-            <div className="space-y-3">
-              <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-              <div className="h-3 bg-background-700 rounded w-5/6 opacity-50" />
-            </div>
-          </section>
-
-          <section>
-            <h2 className="text-2xl font-bold text-foreground-50 mb-4">Usage</h2>
-            <div className="space-y-3">
-              <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-              <div className="h-3 bg-background-700 rounded w-3/4 opacity-50" />
-            </div>
-          </section>
-        </article>
-      </div>
-
-      <aside className="w-64 sticky top-8 h-fit">
-        <TableOfContents />
-      </aside>
-    </div>
-  );
-}

package/src/elements/Documentation/TOC/variations/01-basic/layout/TableOfContents.tsx

@@ -1,37 +0,0 @@
-interface TOCItem {
-  id: string;
-  title: string;
-  level: number;
-}
-
-interface TableOfContentsProps {
-  items?: TOCItem[];
-}
-
-export function TableOfContents({ items }: TableOfContentsProps) {
-  const defaultItems: TOCItem[] = items || [
-    { id: 'intro', title: 'Introduction', level: 1 },
-    { id: 'overview', title: 'Overview', level: 2 },
-    { id: 'getting-started', title: 'Getting Started', level: 2 },
-    { id: 'install', title: 'Installation', level: 1 },
-    { id: 'usage', title: 'Usage', level: 1 },
-  ];
-
-  return (
-    <nav className="bg-background-800 border border-background-700 rounded-md p-4">
-      <div className="text-sm font-semibold text-foreground-200 mb-4">Contents</div>
-      <ul className="space-y-2 text-sm">
-        {defaultItems.map((item) => (
-          <li key={item.id} style={{ marginLeft: `${(item.level - 1) * 12}px` }}>
-            <a
-              href={`#${item.id}`}
-              className="text-foreground-400 hover:text-foreground-200 transition-colors"
-            >
-              {item.title}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  );
-}

package/src/elements/Documentation/TOC/variations/02-expanded/index.tsx

@@ -1,67 +0,0 @@
-"use client"
-import React, { useState } from 'react';
-import { ExpandableTableOfContents } from './layout/ExpandableTableOfContents.js';
-
-export function ExpandedTOC() {
-  const [activeSection, setActiveSection] = useState('intro');
-
-  return (
-    <div className="flex gap-8 min-h-screen bg-background-950 p-8">
-      <div className="flex-1">
-        <article className="space-y-8">
-          <section id="intro">
-            <h2 className="text-2xl font-bold text-foreground-50 mb-4">Introduction</h2>
-            <p className="text-foreground-300 mb-4">
-              Comprehensive guide with expandable table of contents showing active section.
-            </p>
-            <div className="space-y-3">
-              <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-              <div className="h-3 bg-background-700 rounded w-5/6 opacity-50" />
-            </div>
-          </section>
-
-          <section id="concepts">
-            <h2 className="text-2xl font-bold text-foreground-50 mb-4">Core Concepts</h2>
-            <div className="space-y-6">
-              <div>
-                <h3 className="text-lg font-semibold text-foreground-50 mb-3">Fundamentals</h3>
-                <div className="space-y-2 ml-4">
-                  <div className="h-3 bg-background-700 rounded w-4/5 opacity-40" />
-                  <div className="h-3 bg-background-700 rounded w-5/6 opacity-40" />
-                </div>
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-foreground-50 mb-3">Advanced Topics</h3>
-                <div className="space-y-2 ml-4">
-                  <div className="h-3 bg-background-700 rounded w-4/5 opacity-40" />
-                  <div className="h-3 bg-background-700 rounded w-5/6 opacity-40" />
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <section id="implementation">
-            <h2 className="text-2xl font-bold text-foreground-50 mb-4">Implementation</h2>
-            <div className="space-y-3">
-              <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-              <div className="h-3 bg-background-700 rounded w-5/6 opacity-50" />
-              <div className="h-3 bg-background-700 rounded w-4/5 opacity-50" />
-            </div>
-          </section>
-
-          <section id="examples">
-            <h2 className="text-2xl font-bold text-foreground-50 mb-4">Examples</h2>
-            <div className="space-y-3">
-              <div className="h-3 bg-background-700 rounded w-full opacity-50" />
-              <div className="h-3 bg-background-700 rounded w-5/6 opacity-50" />
-            </div>
-          </section>
-        </article>
-      </div>
-
-      <aside className="w-72 sticky top-8 h-fit">
-        <ExpandableTableOfContents activeSection={activeSection} />
-      </aside>
-    </div>
-  );
-}