ui-lab-registry 0.3.45 → 0.3.47

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

@@ -1,91 +0,0 @@
-import React, { useState } from 'react';
-
-interface Section {
-  id: string;
-  title: string;
-  subsections?: Section[];
-}
-
-interface ExpandableTableOfContentsProps {
-  activeSection?: string;
-}
-
-export function ExpandableTableOfContents({ activeSection }: ExpandableTableOfContentsProps) {
-  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set(['concepts']));
-
-  const sections: Section[] = [
-    {
-      id: 'intro',
-      title: 'Introduction',
-    },
-    {
-      id: 'concepts',
-      title: 'Core Concepts',
-      subsections: [
-        { id: 'fundamentals', title: 'Fundamentals' },
-        { id: 'advanced', title: 'Advanced Topics' },
-      ],
-    },
-    {
-      id: 'implementation',
-      title: 'Implementation',
-    },
-    {
-      id: 'examples',
-      title: 'Examples',
-    },
-  ];
-
-  const toggleSection = (id: string) => {
-    const newExpanded = new Set(expandedSections);
-    if (newExpanded.has(id)) {
-      newExpanded.delete(id);
-    } else {
-      newExpanded.add(id);
-    }
-    setExpandedSections(newExpanded);
-  };
-
-  const renderSection = (section: Section, depth = 0) => {
-    const isExpanded = expandedSections.has(section.id);
-    const isActive = activeSection === section.id;
-    const hasSubsections = section.subsections && section.subsections.length > 0;
-
-    return (
-      <div key={section.id}>
-        <button
-          onClick={() => hasSubsections && toggleSection(section.id)}
-          className={`w-full text-left px-3 py-2 rounded text-sm transition-colors ${
-            isActive ? 'bg-accent-500 text-foreground-50 font-medium' : 'text-foreground-400 hover:text-foreground-200'
-          } ${hasSubsections ? 'cursor-pointer' : 'cursor-default'}`}
-        >
-          <div className="flex items-center gap-2">
-            {hasSubsections && (
-              <span className="w-4 flex items-center justify-center">
-                {isExpanded ? '▼' : '▶'}
-              </span>
-            )}
-            {!hasSubsections && <span className="w-4" />}
-            <span>{section.title}</span>
-          </div>
-        </button>
-        {hasSubsections && isExpanded && (
-          <div className="ml-2 space-y-1 mt-1">
-            {section.subsections?.map((subsection) =>
-              renderSection(subsection, depth + 1)
-            )}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  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">Table of Contents</div>
-      <div className="space-y-1">
-        {sections.map((section) => renderSection(section))}
-      </div>
-    </nav>
-  );
-}

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

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

package/src/elements/Elements/Carousel/variations/01-basic/index.tsx

@@ -1,4 +0,0 @@
-// Carousel basic variation placeholder
-export function BasicCarousel() {
-  return <div>Carousel placeholder</div>;
-}

package/src/elements/Elements/Carousel/variations/index.ts

@@ -1,15 +0,0 @@
-// Export all variation components
-export { BasicCarousel } from './01-basic/index.js';
-
-// Type for all variations
-export type CarouselVariations = 'BasicCarousel';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'carousel-basic': { key: '01-basic', export: 'BasicCarousel' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicCarousel,
-} as const;

package/src/elements/Elements/Rating/variations/01-basic/index.tsx

@@ -1,4 +0,0 @@
-// Rating basic variation placeholder
-export function BasicRating() {
-  return <div>Rating placeholder</div>;
-}

package/src/elements/Elements/Rating/variations/index.ts

@@ -1,15 +0,0 @@
-// Export all variation components
-export { BasicRating } from './01-basic/index.js';
-
-// Type for all variations
-export type RatingVariations = 'BasicRating';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'rating-basic': { key: '01-basic', export: 'BasicRating' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicRating,
-} as const;

package/src/elements/Elements/Timeline/variations/01-basic/index.tsx

@@ -1,4 +0,0 @@
-// Timeline basic variation placeholder
-export function BasicTimeline() {
-  return <div>Timeline placeholder</div>;
-}

package/src/elements/Elements/Timeline/variations/index.ts

@@ -1,15 +0,0 @@
-// Export all variation components
-export { BasicTimeline } from './01-basic/index.js';
-
-// Type for all variations
-export type TimelineVariations = 'BasicTimeline';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'timeline-basic': { key: '01-basic', export: 'BasicTimeline' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicTimeline,
-} as const;

package/src/elements/Elements/TreeView/variations/01-basic/index.tsx

@@ -1,4 +0,0 @@
-// TreeView basic variation placeholder
-export function BasicTreeView() {
-  return <div>TreeView placeholder</div>;
-}

package/src/elements/Elements/TreeView/variations/index.ts

@@ -1,15 +0,0 @@
-// Export all variation components
-export { BasicTreeView } from './01-basic/index.js';
-
-// Type for all variations
-export type TreeViewVariations = 'BasicTreeView';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'tree-view-basic': { key: '01-basic', export: 'BasicTreeView' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicTreeView,
-} as const;

package/src/elements/foundation/Header/variations/01-basic/index.tsx

@@ -1,46 +0,0 @@
-"use client"
-import React from 'react';
-import { Header } from './layout/Header.js';
-
-export function BasicHeader() {
-  return (
-    <div className="flex flex-col min-h-screen bg-background-950">
-      <Header logoText="UI Lab" />
-
-      <main className="flex-1">
-        <div className="mx-auto px-4 py-12">
-          <div className="space-y-6">
-            <div className="bg-background-800 rounded-md border border-background-700 p-8">
-              <div className="h-32 bg-background-700 rounded mb-4" />
-              <div className="space-y-3">
-                <div className="h-4 bg-background-700 rounded w-3/4" />
-                <div className="h-4 bg-background-700 rounded w-5/6" />
-                <div className="h-4 bg-background-700 rounded w-4/5" />
-              </div>
-            </div>
-
-            <div className="grid grid-cols-3 gap-4">
-              {[1, 2, 3].map((i) => (
-                <div key={i} className="bg-background-800 rounded-md border border-background-700 p-6">
-                  <div className="h-24 bg-background-700 rounded mb-4" />
-                  <div className="space-y-2">
-                    <div className="h-4 bg-background-700 rounded w-4/5" />
-                    <div className="h-3 bg-background-700 rounded w-3/4" />
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            <div className="bg-background-800 rounded-md border border-background-700 p-8">
-              <div className="space-y-3">
-                <div className="h-4 bg-background-700 rounded w-full" />
-                <div className="h-4 bg-background-700 rounded w-full" />
-                <div className="h-4 bg-background-700 rounded w-3/4" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}

package/src/elements/foundation/Header/variations/01-basic/layout/Header.tsx

@@ -1,21 +0,0 @@
-interface HeaderProps {
-  logoText?: string;
-}
-
-export function Header({ logoText = 'Logo' }: HeaderProps) {
-  return (
-    <header className="bg-background-800 border-b border-background-700">
-      <div className="mx-auto px-4 py-4 flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <div className="w-8 h-8 bg-accent-500 rounded-md" />
-          <span className="text-lg font-semibold text-foreground-50">{logoText}</span>
-        </div>
-        <nav className="flex gap-1">
-          <a href="#" className="px-3 py-2 text-sm text-foreground-400 hover:text-foreground-300 hover:bg-background-700 rounded transition-colors">Home</a>
-          <a href="#" className="px-3 py-2 text-sm text-foreground-400 hover:text-foreground-300 hover:bg-background-700 rounded transition-colors">About</a>
-          <a href="#" className="px-3 py-2 text-sm text-foreground-400 hover:text-foreground-300 hover:bg-background-700 rounded transition-colors">Contact</a>
-        </nav>
-      </div>
-    </header>
-  );
-}

package/src/elements/foundation/Header/variations/index.ts

@@ -1,15 +0,0 @@
-// Export all variation components
-export { BasicHeader } from './01-basic/index.js';
-
-// Type for all variations
-export type HeaderVariations = 'BasicHeader';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'header-basic': { key: '01-basic', export: 'BasicHeader' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicHeader,
-} as const;

package/src/elements/foundation/Page/variations/01-basic/index.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import { Page } from './layout/Page.js';
-
-export function BasicPage() {
-  return (
-    <Page>
-      <div className="space-y-6">
-        <div className="bg-background-800 rounded-md border border-background-700 p-8">
-          <h2 className="text-2xl font-semibold text-foreground-100 mb-4">Welcome to Your Page</h2>
-          <div className="space-y-3">
-            <div className="h-4 bg-background-700 rounded w-3/4" />
-            <div className="h-4 bg-background-700 rounded w-5/6" />
-            <div className="h-4 bg-background-700 rounded w-4/5" />
-          </div>
-        </div>
-
-        <div className="grid grid-cols-3 gap-4">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="bg-background-800 rounded-md border border-background-700 p-6">
-              <div className="h-24 bg-background-700 rounded mb-4" />
-              <div className="space-y-2">
-                <div className="h-4 bg-background-700 rounded w-4/5" />
-                <div className="h-3 bg-background-700 rounded w-3/4" />
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <div className="bg-background-800 rounded-md border border-background-700 p-8">
-          <div className="space-y-3">
-            <div className="h-4 bg-background-700 rounded w-full" />
-            <div className="h-4 bg-background-700 rounded w-full" />
-            <div className="h-4 bg-background-700 rounded w-3/4" />
-          </div>
-        </div>
-      </div>
-    </Page>
-  );
-}

package/src/elements/foundation/Page/variations/01-basic/layout/Page.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-interface PageProps {
-  children?: React.ReactNode;
-}
-
-export function Page({ children }: PageProps) {
-  return (
-    <div className="flex flex-col w-full bg-background-950">
-      <header className="bg-background-800 border-b border-background-700">
-        <div className="mx-auto max-w-6xl px-4 py-4">
-          <h1 className="text-lg font-semibold text-foreground-100">Page Title</h1>
-        </div>
-      </header>
-
-      <main className="flex-1 w-full">
-        <div className="mx-auto max-w-6xl px-4 py-12">
-          {children}
-        </div>
-      </main>
-
-      <footer className="bg-background-800 border-t border-background-700">
-        <div className="mx-auto max-w-6xl px-4 py-4">
-          <p className="text-foreground-400 text-sm">&copy; 2024</p>
-        </div>
-      </footer>
-    </div>
-  );
-}

package/src/elements/foundation/Page/variations/index.ts

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

package/src/elements/foundation/Sidebar/variations/01-basic/index.tsx

@@ -1,15 +0,0 @@
-"use client";
-
-import { Sidebar } from './layout/Sidebar.js';
-
-export function BasicSidebar() {
-  return (
-    <div className="flex min-h-screen bg-background-950">
-      <Sidebar activeItem="home" />
-
-      <main className="flex-1">
-        {/* Content */}
-      </main>
-    </div>
-  );
-}

package/src/elements/foundation/Sidebar/variations/01-basic/layout/Sidebar.tsx

@@ -1,158 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import {
-  FiHome,
-  FiUser,
-  FiSettings,
-  FiLogOut,
-  FiChevronLeft,
-  FiChevronRight,
-  FiBox,
-  FiPieChart,
-  FiMessageSquare,
-  FiBell,
-  FiHelpCircle,
-  FiBriefcase
-} from 'react-icons/fi';
-import { Divider, List } from 'ui-lab-components';
-
-interface SidebarProps {
-  activeItem?: string;
-}
-
-export function Sidebar({ activeItem = 'home' }: SidebarProps) {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
-  const mainNavItems = [
-    { id: 'home', label: 'Dashboard', icon: FiHome },
-    { id: 'projects', label: 'Projects', icon: FiBriefcase },
-    { id: 'analytics', label: 'Analytics', icon: FiPieChart },
-    { id: 'messages', label: 'Messages', icon: FiMessageSquare },
-  ];
-
-  const secondaryNavItems = [
-    { id: 'profile', label: 'Profile', icon: FiUser },
-    { id: 'notifications', label: 'Notifications', icon: FiBell },
-    { id: 'settings', label: 'Settings', icon: FiSettings },
-  ];
-
-  const bottomNavItems = [
-    { id: 'help', label: 'Help & Support', icon: FiHelpCircle },
-  ];
-
-  return (
-    <aside
-      className={`
-        ${isCollapsed ? 'w-24' : 'w-80'} 
-        bg-background-900 border-r border-background-800 
-        flex flex-col transition-all duration-300 ease-in-out
-        h-screen sticky top-0 shadow-xl
-      `}
-    >
-      {/* Sidebar Header */}
-      <div className="h-20 flex items-center justify-between px-6 shrink-0">
-        {!isCollapsed && (
-          <div className="flex items-center gap-4 overflow-hidden whitespace-nowrap animate-in fade-in duration-300">
-            <div className="w-10 h-10 bg-accent-600 rounded-xl flex items-center justify-center shrink-0 text-white shadow-md">
-              <FiBox size={22} />
-            </div>
-            <div className="flex flex-col">
-              <span className="text-md font-bold text-foreground-50 leading-none">UI Lab</span>
-              <span className="text-sm text-foreground-400 mt-1 font-medium">Enterprise</span>
-            </div>
-          </div>
-        )}
-
-        <button
-          onClick={() => setIsCollapsed(!isCollapsed)}
-          className={`
-            p-2.5 rounded-xl text-foreground-400 hover:bg-background-800 hover:text-foreground-50 
-            transition-all focus:outline-none focus:ring-2 focus:ring-accent-500/30
-            ${isCollapsed ? 'mx-auto' : ''}
-          `}
-          aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-        >
-          {isCollapsed ? <FiChevronRight size={22} /> : <FiChevronLeft size={22} />}
-        </button>
-      </div>
-
-      <div className="px-6">
-        <Divider className="bg-background-800" />
-      </div>
-
-      {/* Navigation Items */}
-      <nav className="flex-1 overflow-y-auto overflow-x-hidden custom-scrollbar">
-        <List aria-label="Main navigation" className="px-4 py-6 space-y-2">
-          {mainNavItems.map((item) => (
-            <NavItem key={item.id} item={item} isActive={activeItem === item.id} isCollapsed={isCollapsed} />
-          ))}
-        </List>
-
-        <div className="px-4 my-4">
-          <List.Divider />
-        </div>
-
-        <List aria-label="Secondary navigation" className="px-4 py-2 space-y-2">
-          {secondaryNavItems.map((item) => (
-            <NavItem key={item.id} item={item} isActive={activeItem === item.id} isCollapsed={isCollapsed} />
-          ))}
-        </List>
-      </nav>
-
-      {/* Footer */}
-      <div className="p-4 shrink-0 space-y-2 bg-background-900 z-10">
-        <Divider className="mb-4 bg-background-800" />
-
-        {bottomNavItems.map((item) => (
-          <NavItem key={item.id} item={item} isActive={activeItem === item.id} isCollapsed={isCollapsed} />
-        ))}
-
-        <button
-          className={`
-            w-full flex items-center gap-4 px-3 py-3
-            text-foreground-400 hover:text-red-400 hover:bg-red-500/10
-            rounded-xl transition-all duration-200 group
-            ${isCollapsed ? 'justify-center' : ''}
-          `}
-          title={isCollapsed ? "Logout" : undefined}
-        >
-          <FiLogOut size={22} className="shrink-0 transition-colors" />
-          {!isCollapsed && (
-            <span className="text-md font-medium whitespace-nowrap overflow-hidden animate-in fade-in slide-in-from-left-2 duration-200">
-              Logout
-            </span>
-          )}
-        </button>
-      </div>
-    </aside>
-  );
-}
-
-function NavItem({ item, isActive, isCollapsed }: { item: any, isActive: boolean, isCollapsed: boolean }) {
-  const Icon = item.icon;
-  return (
-    <a
-      href="#"
-      className={`
-            flex items-center gap-4 px-3 py-3 rounded-xl transition-all duration-200 group relative
-            ${isActive
-          ? 'bg-accent-500/10 text-accent-500 shadow-sm'
-          : 'text-foreground-400 hover:text-foreground-50 hover:bg-background-800'}
-            ${isCollapsed ? 'justify-center' : ''}
-          `}
-      title={isCollapsed ? item.label : undefined}
-    >
-      <Icon
-        size={22}
-        className={`shrink-0 transition-transform duration-200 ${isActive ? '' : 'group-hover:scale-110'}`}
-      />
-
-      {!isCollapsed && (
-        <span className="text-md font-medium whitespace-nowrap overflow-hidden animate-in fade-in slide-in-from-left-2 duration-200">
-          {item.label}
-        </span>
-      )}
-    </a>
-  )
-}

package/src/elements/foundation/Sidebar/variations/index.ts

@@ -1,15 +0,0 @@
-// Export all variation components
-export { BasicSidebar } from './01-basic/index.js';
-
-// Type for all variations
-export type SidebarVariations = 'BasicSidebar';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'sidebar-basic': { key: '01-basic', export: 'BasicSidebar' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicSidebar,
-} as const;

package/src/sections/CTA/variations/01-banner/index.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button } from 'ui-lab-components';
-import { ArrowRight } from 'lucide-react';
-
-export function BannerCTA() {
-  return (
-    <section className="w-full py-16 px-4 md:py-24">
-      <div className="mx-auto max-w-4xl">
-        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-accent-600 to-accent-500 px-6 py-12 md:px-12 md:py-16">
-          {/* Decorative elements */}
-          <div className="absolute right-0 top-0 h-96 w-96 translate-x-1/3 -translate-y-1/4 rounded-full bg-accent-400 opacity-10 blur-3xl" />
-          <div className="absolute left-0 bottom-0 h-80 w-80 -translate-x-1/3 translate-y-1/4 rounded-full bg-accent-600 opacity-10 blur-3xl" />
-
-          <div className="relative z-10">
-            <h2 className="mx-auto mb-4 max-w-2xl text-3xl font-bold text-white md:text-4xl">
-              Ready to get started?
-            </h2>
-            <p className="mx-auto mb-8 max-w-xl text-lg text-accent-50">
-              Join thousands of satisfied users and transform the way you work today. No credit card required.
-            </p>
-
-            <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
-              <Button
-                variant="secondary"
-                size="lg"
-                className="group w-full sm:w-auto"
-              >
-                Get Started Free
-                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
-              </Button>
-              <Button
-                variant="outline"
-                size="lg"
-                className="border-white text-white hover:bg-white/10 w-full sm:w-auto"
-              >
-                Schedule Demo
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Banner CTA',
-  description: 'Wide banner call-to-action with gradient background and dual action buttons',
-  demoPath: 'cta-banner',
-};