@peacock-ui/core 2.0.0 → 3.0.0-alpha.2

package/README.md

@@ -1,26 +1,26 @@
-# 🦚 Peacock UI
+# 🦚 Peacock UI v3 (Quantum)
 
-**Fluidity over Staticity.** A high-fidelity, motion-first design system for React 19 and Tailwind CSS 4.
+**Fluidity over Staticity.** A high-fidelity, WebGL-accelerated design system for React 19.
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![React 19](https://img.shields.io/badge/React-19-blue.svg)](https://react.dev/)
 [![Framer Motion](https://img.shields.io/badge/Motion-Framer-black.svg)](https://www.framer.com/motion/)
+[![WebGL](https://img.shields.io/badge/Engine-Quantum--WebGL-5865F2.svg)](https://threejs.org/)
 
-Peacock UI is not just a component library; it's an aesthetic framework designed to bridge the gap between static interfaces and immersive interactive experiences. Inspired by the sleek, high-end aesthetics of Discord and Linear.
+Peacock UI v3 introduces the **Quantum Engine**—a hybrid rendering architecture that bridges standard React DOM components with a WebGL acceleration layer. Designed for developers who demand Discord-grade aesthetics and sub-millisecond interaction physics.
 
 ## ✨ Features
 
-- **🚀 React 19 Ready**: Built with the latest React features and optimizations.
-- **🎨 Plumage Engine**: Dynamic Tailwind plugin for advanced glassmorphism and multi-layered gradients.
-- **⚡ Physics-Based Motion**: Every component inherits spring physics (stiffness, damping, mass) for a natural feel.
-- **🛡️ Type-Safe**: 100% TypeScript with strict prop definitions.
-- **♿ Accessible**: Built with Radix UI primitives for WAI-ARIA compliance.
-- **🌓 Dark Mode First**: Optimized for deep charcoal and neon-accented aesthetics.
+- **⚛️ Quantum Engine**: Integrated `@react-three/fiber` layer for fluid background shaders and 3D holographic effects.
+- **🎨 Plumage Engine v2**: Enhanced Tailwind plugin with deep glassmorphism (`plumage-glass-heavy`) and noise textures.
+- **🚀 React 19 Native**: Optimized for the latest React concurrency features and compiler.
+- **⚡ Physics-Based Motion**: Mass, stiffness, and damping are first-class citizens in every component.
+- **🌓 Dark Mode First**: A deep charcoal and neon-accented aesthetic inspired by high-end gaming platforms.
 
 ## 📦 Installation
 
 ```bash
-npm install @peacock-ui/core framer-motion tailwindcss lucide-react
+npm install @peacock-ui/core framer-motion three @react-three/fiber @react-three/drei lucide-react
 ```
 
 ## 🚀 Quick Start
@@ -29,54 +29,56 @@ npm install @peacock-ui/core framer-motion tailwindcss lucide-react
 2. **Wrap your App**:
 
 ```tsx
-import { PeacockProvider, PeacockButton } from '@peacock-ui/core';
+import { PeacockProvider, PeacockButton, HolographicCard } from '@peacock-ui/core';
 import '@peacock-ui/core/style.css';
 
 function App() {
   return (
     <PeacockProvider theme="dark">
-      <PeacockButton onClick={() => console.log("Clicked!")}>
-        Spread Plumage
-      </PeacockButton>
+      <div className="p-20">
+        <HolographicCard>
+          <h1 className="text-white text-3xl font-bold">Quantum Interface</h1>
+          <PeacockButton className="mt-4">
+            Initialize Engine
+          </PeacockButton>
+        </HolographicCard>
+      </div>
     </PeacockProvider>
   );
 }
 ```
 
-## 🧱 Component Reference
+## 🧱 Quantum Components
 
-### `PeacockButton`
-Interactive light-source button with physics-based haptics.
+### `HolographicCard`
+A 3D-tilt card that tracks mouse movement with sub-millisecond latency and simulated light reflections.
 ```tsx
-<PeacockButton variant="primary" glowSize={200}>
-  Spread Plumage
-</PeacockButton>
+<HolographicCard>
+  {/* Your Content */}
+</HolographicCard>
 ```
-**Props:** `variant` ('primary'|'outline'|'glass'), `glowSize` (number)
 
-### `PeacockInput`
-Focus-reactive input with dynamic glow borders.
+### `PeacockDock`
+macOS-inspired navigation with non-linear magnification and spring-loaded scaling.
 ```tsx
-<PeacockInput label="Email" placeholder="you@example.com" error="Required" />
+<PeacockDock items={[{ id: '1', icon: <Home />, label: 'Home' }]} />
 ```
-**Props:** `label` (string), `error` (string), `icon` (ReactNode)
 
-### `FluidCard`
-Expandable surface with shared-element layout transitions.
+### `PeacockCommand`
+A high-fidelity command palette (Cmd+K) with integrated glassmorphism.
 ```tsx
-<FluidCard title="Physics" description="Hover for details" expandedContent={<p>Details...</p>} />
+<CommandDialog open={isOpen} onOpenChange={setIsOpen}>
+  <CommandInput placeholder="Search commands..." />
+  {/* ... items */}
+</CommandDialog>
 ```
 
-### `PeacockSwitch`
-Spring-loaded toggle interaction.
-```tsx
-<PeacockSwitch checked={true} onChange={(val) => {}} label="Motion Enabled" />
-```
-
-### `GlassMenu`
-Command-palette style recursive menu.
+### `PeacockButton`
+Interactive light-source button with follow-mouse radial gradients and physics-based haptics.
 ```tsx
-<GlassMenu isOpen={isOpen} onClose={close} items={[{ id: '1', label: 'Home' }]} />
+<PeacockButton variant="primary" glowSize={150}>
+  Spread Plumage
+</PeacockButton>
 ```
 
 ## 🛠️ Development
@@ -97,4 +99,4 @@ npm run build
 
 ## 📜 License
 
-MIT © [Sploov](https://github.com/sploov)
+MIT © [Sploov](https://github.com/sploov)

package/dist/canvas/PeacockScene.d.ts

@@ -0,0 +1 @@
+export declare const PeacockScene: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/HolographicCard.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface HolographicCardProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const HolographicCard: ({ children, className }: HolographicCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PeacockDock.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface DockItem {
+    id: string;
+    icon: React.ReactNode;
+    label?: string;
+    onClick?: () => void;
+}
+interface PeacockDockProps {
+    items: DockItem[];
+    className?: string;
+}
+export declare const PeacockDock: ({ items, className }: PeacockDockProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PeacockTabs.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export interface TabItem {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export interface PeacockTabsProps {
+    items: TabItem[];
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    variant?: 'pill' | 'underline' | 'glass';
+}
+export declare const PeacockTabs: ({ items, defaultValue, onValueChange, className, variant }: PeacockTabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/PeacockAvatar.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+export declare const PeacockAvatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    glow?: boolean;
+    status?: "online" | "offline" | "busy";
+} & React.RefAttributes<HTMLSpanElement>>;
+export declare const PeacockAvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const PeacockAvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/data-display/PeacockCode.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface PeacockCodeProps extends React.HTMLAttributes<HTMLPreElement> {
+    children: React.ReactNode;
+}
+export declare const PeacockCode: ({ children, className, ...props }: PeacockCodeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/feedback/PeacockSkeleton.d.ts

@@ -0,0 +1,2 @@
+declare function PeacockSkeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { PeacockSkeleton };

package/dist/components/inputs/PeacockSlider.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+export declare const PeacockSlider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/overlay/PeacockCommand.d.ts

@@ -0,0 +1,76 @@
+import { Dialog } from '../PeacockDialog';
+import * as React from "react";
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface CommandDialogProps extends React.ComponentPropsWithoutRef<typeof Dialog> {
+    children: React.ReactNode;
+}
+declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "value" | "type" | "onChange"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "onSelect" | "disabled"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, };

package/dist/components/overlay/PeacockToast.d.ts

@@ -0,0 +1,4 @@
+import { Toaster as Sonner } from 'sonner';
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+export declare const PeacockToaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './MotionProvider';
 export * from './PeacockProvider';
 export * from './MotionPrimitive';
+export * from './canvas/PeacockScene';
 export * from './components/PeacockButton';
 export * from './components/FluidCard';
 export * from './components/GlassMenu';
@@ -9,4 +10,13 @@ export * from './components/PeacockSwitch';
 export * from './components/PeacockBadge';
 export * from './components/PeacockTooltip';
 export * from './components/PeacockDialog';
+export * from './components/PeacockTabs';
+export * from './components/HolographicCard';
+export * from './components/PeacockDock';
+export * from './components/inputs/PeacockSlider';
+export * from './components/data-display/PeacockAvatar';
+export * from './components/data-display/PeacockCode';
+export * from './components/feedback/PeacockSkeleton';
+export * from './components/overlay/PeacockCommand';
+export * from './components/overlay/PeacockToast';
 export * from './hooks/utils';