pixelforge-ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,666 @@
+import React from 'react';
+
+declare const colors: {
+    primary: {
+        lime: string;
+        lavender: string;
+        sky: string;
+        peach: string;
+        mint: string;
+    };
+    dark: {
+        lime: string;
+        lavender: string;
+        sky: string;
+        peach: string;
+        mint: string;
+    };
+    neutral: {
+        black: string;
+        dark: string;
+        gray: string;
+        light: string;
+        white: string;
+    };
+    semantic: {
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+    accent: string;
+};
+declare const typography: {
+    font: {
+        pixel: string;
+        sans: string;
+        mono: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    weight: {
+        normal: number;
+        bold: number;
+    };
+    lineHeight: {
+        tight: number;
+        normal: number;
+        relaxed: number;
+    };
+};
+declare const spacing: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    8: string;
+    10: string;
+    12: string;
+    16: string;
+    20: string;
+};
+declare const shadows: {
+    sm: string;
+    md: string;
+    lg: string;
+    glow: {
+        lime: string;
+        lavender: string;
+        sky: string;
+        peach: string;
+    };
+    press: string;
+};
+declare const borderRadius: {
+    sm: string;
+    base: string;
+    lg: string;
+    full: string;
+};
+declare const breakpoints: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+declare const zIndex: {
+    hidden: number;
+    base: number;
+    dropdown: number;
+    sticky: number;
+    fixed: number;
+    modal: number;
+    popover: number;
+    tooltip: number;
+};
+declare const transitions: {
+    fast: string;
+    base: string;
+    slow: string;
+};
+declare const gamePalettes: {
+    nes: {
+        name: string;
+        colors: string[];
+    };
+    gameboy: {
+        name: string;
+        colors: string[];
+    };
+    atari: {
+        name: string;
+        colors: string[];
+    };
+    snes: {
+        name: string;
+        colors: string[];
+    };
+};
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Varianti di stile del bottone
+     */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /**
+     * Dimensione del bottone
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Se il bottone è disabilitato
+     */
+    disabled?: boolean;
+    /**
+     * Se il bottone è in stato di loading
+     */
+    isLoading?: boolean;
+    /**
+     * Contenuto personalizzato durante il loading
+     */
+    loadingText?: string;
+}
+/**
+ * Button Component
+ *
+ * Un bottone retro-future con supporto a multiple varianti e dimensioni.
+ *
+ * @example
+ * ```tsx
+ * <Button>Press Start</Button>
+ * <Button variant="secondary" size="lg">Attack</Button>
+ * <Button variant="outline" disabled>Disabled</Button>
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Label del campo input
+     */
+    label?: string;
+    /**
+     * Messaggio di errore da mostrare
+     */
+    error?: string;
+    /**
+     * Testo di aiuto sotto l'input
+     */
+    helperText?: string;
+    /**
+     * Se il campo è obbligatorio
+     */
+    required?: boolean;
+    /**
+     * Icona o elemento da mostrare a sinistra dell'input
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Icona o elemento da mostrare a destra dell'input
+     */
+    rightIcon?: React.ReactNode;
+}
+/**
+ * Input Component
+ *
+ * Campo di testo retro-future con supporto a label, errori e icone.
+ *
+ * @example
+ * ```tsx
+ * <Input placeholder="Enter name" />
+ * <Input label="Username" required />
+ * <Input error="Invalid email" type="email" />
+ * ```
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * Titolo della card
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Sottotitolo della card
+     */
+    subtitle?: string | React.ReactNode;
+    /**
+     * Se la card ha uno sfondo interattivo
+     */
+    interactive?: boolean;
+    /**
+     * Variant di colore della card
+     */
+    variant?: 'default' | 'lime' | 'lavender' | 'sky' | 'peach' | 'mint';
+    /**
+     * Header personalizzato della card
+     */
+    header?: React.ReactNode;
+    /**
+     * Footer personalizzato della card
+     */
+    footer?: React.ReactNode;
+}
+/**
+ * Card Component
+ *
+ * Contenitore retro-future con supporto a titolo, sottotitolo e varianti colore.
+ *
+ * @example
+ * ```tsx
+ * <Card title="Player Stats" subtitle="Level 42">
+ *   <p>HP: 100/100</p>
+ * </Card>
+ *
+ * <Card variant="lavender" interactive>
+ *   <p>Click me!</p>
+ * </Card>
+ * ```
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Variante di stile della badge
+     */
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'lime' | 'lavender' | 'sky' | 'peach' | 'mint';
+    /**
+     * Dimensione della badge
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Se la badge è dismissible (ha una X)
+     */
+    dismissible?: boolean;
+    /**
+     * Callback quando la badge viene dismessa
+     */
+    onDismiss?: () => void;
+}
+/**
+ * Badge Component
+ *
+ * Piccola etichetta retro-future con supporto a varianti colore e dimensioni.
+ *
+ * @example
+ * ```tsx
+ * <Badge>Active</Badge>
+ * <Badge variant="success">Completed</Badge>
+ * <Badge variant="error" dismissible onDismiss={() => {}}>Alert</Badge>
+ * ```
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface ModalProps {
+    /**
+     * Se il modal è aperto
+     */
+    isOpen: boolean;
+    /**
+     * Callback quando il modal viene chiuso
+     */
+    onClose: () => void;
+    /**
+     * Titolo del modal
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Se il modal può essere chiuso cliccando fuori
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Se mostrare il bottone di chiusura (X)
+     */
+    showCloseButton?: boolean;
+    /**
+     * Footer personalizzato del modal
+     */
+    footer?: React.ReactNode;
+    /**
+     * Size del modal
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Contenuto del modal
+     */
+    children: React.ReactNode;
+}
+/**
+ * Modal Component
+ *
+ * Finestra modale retro-future con backdrop, chiusura, e supporto a size.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * return (
+ *   <>
+ *     <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+ *     <Modal
+ *       isOpen={isOpen}
+ *       onClose={() => setIsOpen(false)}
+ *       title="Confirm Action"
+ *     >
+ *       <p>Are you sure?</p>
+ *     </Modal>
+ *   </>
+ * )
+ * ```
+ */
+declare const Modal: React.FC<ModalProps>;
+
+interface DropdownItem {
+    /**
+     * ID univoco dell'item
+     */
+    id: string;
+    /**
+     * Label visualizzato
+     */
+    label: string | React.ReactNode;
+    /**
+     * Se l'item è disabilitato
+     */
+    disabled?: boolean;
+    /**
+     * Se è un separatore
+     */
+    divider?: boolean;
+    /**
+     * Callback al click
+     */
+    onClick?: () => void;
+}
+interface DropdownProps {
+    /**
+     * Trigger element (il bottone che apre il dropdown)
+     */
+    trigger: React.ReactNode;
+    /**
+     * Array di items del dropdown
+     */
+    items: DropdownItem[];
+    /**
+     * Se il dropdown è aperto
+     */
+    isOpen?: boolean;
+    /**
+     * Callback quando l'apertura cambia
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Posizionamento del dropdown
+     */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+}
+/**
+ * Dropdown Component
+ *
+ * Menu a tendina retro-future con supporto a items, divider, e disabilitazione.
+ *
+ * @example
+ * ```tsx
+ * <Dropdown
+ *   trigger={<Button>Menu</Button>}
+ *   items={[
+ *     { id: '1', label: 'Edit', onClick: () => {} },
+ *     { id: '2', label: 'Delete', onClick: () => {} },
+ *     { id: '3', label: '', divider: true },
+ *     { id: '4', label: 'Copy', onClick: () => {} },
+ *   ]}
+ * />
+ * ```
+ */
+declare const Dropdown: React.FC<DropdownProps>;
+
+interface TooltipProps {
+    /**
+     * Contenuto del tooltip
+     */
+    content: string | React.ReactNode;
+    /**
+     * Elemento su cui mostrare il tooltip
+     */
+    children: React.ReactElement;
+    /**
+     * Posizionamento del tooltip
+     */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Delay prima di mostrare il tooltip (ms)
+     */
+    delay?: number;
+    /**
+     * Se il tooltip è disabilitato
+     */
+    disabled?: boolean;
+    /**
+     * Tema del tooltip
+     */
+    variant?: 'default' | 'dark';
+}
+/**
+ * Tooltip Component
+ *
+ * Suggerimento che appare al passaggio del mouse, con supporto a placement e delay.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="This is helpful text" placement="top">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: React.FC<TooltipProps>;
+
+interface NavbarLink {
+    /**
+     * Label del link
+     */
+    label: string;
+    /**
+     * URL o action del link
+     */
+    href?: string;
+    /**
+     * Callback al click
+     */
+    onClick?: () => void;
+    /**
+     * Se il link è attivo
+     */
+    active?: boolean;
+    /**
+     * Se il link è disabilitato
+     */
+    disabled?: boolean;
+}
+interface NavbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Logo o brand della navbar
+     */
+    brand?: string | React.ReactNode;
+    /**
+     * Array di links della navbar
+     */
+    links?: NavbarLink[];
+    /**
+     * Elemento a destra della navbar (es. user menu)
+     */
+    rightElement?: React.ReactNode;
+    /**
+     * Callback quando il brand viene cliccato
+     */
+    onBrandClick?: () => void;
+    /**
+     * Se la navbar è sticky
+     */
+    sticky?: boolean;
+}
+/**
+ * Navbar Component
+ *
+ * Barra di navigazione retro-future con supporto a brand, links e elemento destro.
+ *
+ * @example
+ * ```tsx
+ * <Navbar
+ *   brand="PixelForge"
+ *   links={[
+ *     { label: 'Home', href: '/', active: true },
+ *     { label: 'Docs', href: '/docs' },
+ *     { label: 'About', href: '/about' },
+ *   ]}
+ *   rightElement={<Button size="sm">Login</Button>}
+ * />
+ * ```
+ */
+declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLDivElement>>;
+
+interface SidebarItem {
+    /**
+     * ID univoco dell'item
+     */
+    id: string;
+    /**
+     * Label visualizzato
+     */
+    label: string;
+    /**
+     * Icona o elemento prima del label
+     */
+    icon?: React.ReactNode;
+    /**
+     * URL o action dell'item
+     */
+    href?: string;
+    /**
+     * Callback al click
+     */
+    onClick?: () => void;
+    /**
+     * Se l'item è attivo
+     */
+    active?: boolean;
+    /**
+     * Se l'item è disabilitato
+     */
+    disabled?: boolean;
+    /**
+     * Sottomenu (nesting supportato)
+     */
+    children?: SidebarItem[];
+}
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Logo o brand della sidebar
+     */
+    brand?: string | React.ReactNode;
+    /**
+     * Array di items della sidebar
+     */
+    items: SidebarItem[];
+    /**
+     * Se la sidebar è collassabile
+     */
+    collapsible?: boolean;
+    /**
+     * Se la sidebar è di default collassata
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Elemento nel footer della sidebar
+     */
+    footer?: React.ReactNode;
+}
+/**
+ * Sidebar Component
+ *
+ * Pannello laterale retro-future con supporto a nested items, collapsing, e icone.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   brand="Menu"
+ *   items={[
+ *     { id: '1', label: 'Home', icon: '🏠' },
+ *     { id: '2', label: 'Settings', icon: '⚙️', active: true },
+ *     {
+ *       id: '3',
+ *       label: 'More',
+ *       icon: '📁',
+ *       children: [
+ *         { id: '3a', label: 'Option A' },
+ *         { id: '3b', label: 'Option B' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
+
+interface FooterLink {
+    /**
+     * Label del link
+     */
+    label: string;
+    /**
+     * URL del link
+     */
+    href?: string;
+    /**
+     * Callback al click
+     */
+    onClick?: () => void;
+}
+interface FooterSection {
+    /**
+     * Titolo della sezione
+     */
+    title: string;
+    /**
+     * Array di links della sezione
+     */
+    links: FooterLink[];
+}
+interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Marchio o copyright text
+     */
+    brand?: string | React.ReactNode;
+    /**
+     * Sezioni del footer
+     */
+    sections?: FooterSection[];
+    /**
+     * Testo di copyright
+     */
+    copyright?: string;
+    /**
+     * Elemento personalizzato nel footer (es. social links)
+     */
+    socialLinks?: React.ReactNode;
+}
+/**
+ * Footer Component
+ *
+ * Piè di pagina retro-future con supporto a sezioni, copyright, e social links.
+ *
+ * @example
+ * ```tsx
+ * <Footer
+ *   brand="PixelForge"
+ *   copyright="© 2024 PixelForge. All rights reserved."
+ *   sections={[
+ *     {
+ *       title: 'Product',
+ *       links: [
+ *         { label: 'Features', href: '#' },
+ *         { label: 'Pricing', href: '#' },
+ *       ],
+ *     },
+ *     {
+ *       title: 'Company',
+ *       links: [
+ *         { label: 'About', href: '#' },
+ *         { label: 'Contact', href: '#' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare const Footer: React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLElement>>;
+
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Dropdown, type DropdownItem, type DropdownProps, Footer, type FooterLink, type FooterProps, type FooterSection, Input, type InputProps, Modal, type ModalProps, Navbar, type NavbarLink, type NavbarProps, Sidebar, type SidebarItem, type SidebarProps, Tooltip, type TooltipProps, borderRadius, breakpoints, colors, gamePalettes, shadows, spacing, transitions, typography, zIndex };