cyberui-2045 1.3.0 → 1.3.2

package/README.md

@@ -1,10 +1,10 @@
-# CyberUI 🚀
+# CyberUI
 
 A cyberpunk-themed React UI library with neon-styled components and futuristic aesthetics.
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-## � Demo & Documentation
+## 🌐 Demo & Documentation
 
 - 🔗 **[Live Demo](https://patrickkuei.github.io/CyberUI)** - Experience the cyberpunk theme in action
 - 📚 **[Storybook Documentation](https://patrickkuei.github.io/CyberUI/storybook)** - Interactive component documentation
@@ -15,9 +15,12 @@ A cyberpunk-themed React UI library with neon-styled components and futuristic a
 npm install cyberui-2045
 ```
 
+Import the core stylesheet and components
+
 ```tsx
-import React from 'react';
-import { CircularProgress, Notification } from 'cyberui-2045';
+import React from "react";
+import "cyberui-2045/styles.css";
+import { CircularProgress, Notification } from "cyberui-2045";
 
 function App() {
   return (
@@ -36,6 +39,10 @@ function App() {
 }
 ```
 
+## Changelog
+
+See the full history in [CHANGELOG.md](./CHANGELOG.md).
+
 ## 🛠️ Development
 
 ```bash

package/dist/components/Badge.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+export interface BadgeProps {
+    variant?: 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning';
+    size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
+    children: React.ReactNode;
+    className?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    clickable?: boolean;
+    onClick?: () => void;
+}
+declare const Badge: React.FC<BadgeProps>;
+export default Badge;

package/dist/components/Button.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
+    children: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/Card.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+export interface CardProps {
+    variant?: 'default' | 'accent' | 'small';
+    size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
+    title?: string;
+    titleBorder?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+declare const Card: React.FC<CardProps>;
+export default Card;

package/dist/components/Carousel.d.ts

@@ -0,0 +1,71 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+/**
+ * Size options for the Carousel component
+ */
+export type CarouselSize = "sm" | "md" | "lg";
+/**
+ * Transition effects for the Carousel
+ */
+export type CarouselTransition = "slide" | "fade" | "matrix" | "signal-glitch";
+/**
+ * Object fit options for images
+ */
+export type CarouselObjectFit = "cover" | "contain";
+/**
+ * Image data structure for Carousel
+ */
+export interface CarouselImageData {
+    /** Image source URL */
+    src: string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Optional fallback image URL */
+    fallbackSrc?: string;
+    /** Optional caption */
+    caption?: string;
+}
+/**
+ * Lifecycle callback functions for Carousel events
+ */
+export interface CarouselCallbacks {
+    /** Fired before slide change (fromIndex, toIndex) */
+    onBeforeChange?: (fromIndex: number, toIndex: number) => void;
+    /** Fired after slide change */
+    onAfterChange?: (index: number) => void;
+}
+/**
+ * Props for the CyberUI Carousel component
+ */
+export interface CarouselProps extends CarouselCallbacks {
+    /** Array of images to display */
+    images: CarouselImageData[];
+    /** Current slide index (controlled) */
+    currentIndex: number;
+    /** Callback when slide changes */
+    onChange: (index: number) => void;
+    /** Size variant with responsive support */
+    size?: ResponsiveValue<CarouselSize>;
+    /** Enable auto-play functionality */
+    autoPlay?: boolean;
+    /** Auto-play interval in milliseconds */
+    interval?: number;
+    /** Enable infinite loop */
+    infinite?: boolean;
+    /** Transition effect */
+    transition?: CarouselTransition;
+    /** Image object fit behavior */
+    objectFit?: CarouselObjectFit;
+    /** Show navigation arrows */
+    showArrows?: boolean;
+    /** Show slide indicators */
+    showIndicators?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Disable click-to-expand on images */
+    disableImagePreview?: boolean;
+    /** Control signal-glitch effect frequency. Float (0.0-1.0) for probability, boolean for on/off */
+    glitchRate?: number | boolean;
+}
+declare const _default: React.NamedExoticComponent<CarouselProps>;
+export default _default;

package/dist/components/CircularProgress.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface CircularProgressProps {
+    progress: number;
+    radius: number;
+    className?: string;
+    children?: React.ReactNode;
+    ariaLabel?: string;
+}
+declare const CircularProgress: React.FC<CircularProgressProps>;
+export default CircularProgress;

package/dist/components/Image.d.ts

@@ -0,0 +1,73 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+/**
+ * Size options for the Image component
+ */
+export type ImageSize = "sm" | "md" | "lg";
+/**
+ * Animation configuration for preview transitions
+ */
+export interface ImageAnimationConfig {
+    /** Duration of opening animation in milliseconds */
+    openDuration?: number;
+    /** Duration of closing animation in milliseconds */
+    closeDuration?: number;
+    /** Enable/disable cyberpunk effects */
+    cyberpunkEffects?: boolean;
+}
+/**
+ * Callback functions for Image component events
+ */
+export interface ImageCallbacks {
+    /** Fired when preview opens */
+    onPreviewOpen?: () => void;
+    /** Fired when preview closes */
+    onPreviewClose?: () => void;
+    /** Fired when image loads successfully */
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+    /** Fired when image fails to load */
+    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+}
+/**
+ * Props for the CyberUI Image component
+ */
+export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "size" | "onLoad" | "onError">, ImageCallbacks {
+    /** Image source URL (required) */
+    src: string;
+    /** Alternative text for accessibility (required) */
+    alt: string;
+    /** Size of the image container */
+    size?: ResponsiveValue<ImageSize>;
+    /** Enable click-to-expand preview functionality */
+    preview?: boolean;
+    /** Fallback image URL when main image fails to load */
+    fallback?: string;
+    /** Custom loading placeholder component */
+    placeholder?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Animation configuration */
+    animation?: ImageAnimationConfig;
+    /** Disable lazy loading (images load immediately) */
+    eager?: boolean;
+    /** Custom preview container styles */
+    previewClassName?: string;
+}
+/**
+ * CyberUI Image Component
+ *
+ * A cyberpunk-themed image component with click-to-expand preview functionality,
+ * loading states, error handling, and smooth animations.
+ *
+ * @example
+ * ```tsx
+ * <Image
+ *   src="/cyber-city.jpg"
+ *   alt="Cyberpunk cityscape"
+ *   size="lg"
+ *   onPreviewOpen={() => console.log('Preview opened')}
+ * />
+ * ```
+ */
+declare const Image: React.FC<ImageProps>;
+export default Image;

package/dist/components/Input.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
+    label?: string;
+    helperText?: string;
+    error?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/components/LinearProgress.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+export interface LinearProgressProps {
+    progress: number;
+    size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
+    className?: string;
+}
+declare const LinearProgress: React.FC<LinearProgressProps>;
+export default LinearProgress;

package/dist/components/Modal.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+export interface ModalAnimationConfig {
+    openDuration?: number;
+    closeDuration?: number;
+    crtEffects?: boolean;
+}
+export interface ModalCallbacks {
+    onOpen?: () => void;
+    onClose?: () => void;
+    onCRTBootComplete?: () => void;
+}
+export interface ModalProps extends ModalCallbacks {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    cancelText?: string;
+    confirmText?: string;
+    confirmLoading?: boolean;
+    showCancel?: boolean;
+    showConfirm?: boolean;
+    size?: "sm" | "md" | "lg" | "xl" | "fullscreen";
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    animation?: ModalAnimationConfig;
+    className?: string;
+    overlayClassName?: string;
+    showCloseButton?: boolean;
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/Notification.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+export interface NotificationProps {
+    type: 'success' | 'warning' | 'error';
+    title: string;
+    message: string;
+    size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
+    onClose?: () => void;
+}
+declare const Notification: React.FC<NotificationProps>;
+export default Notification;

package/dist/components/SegmentedProgress.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface SegmentedProgressProps {
+    progress: number;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const SegmentedProgress: React.FC<SegmentedProgressProps>;
+export default SegmentedProgress;

package/dist/components/Select.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    label?: string;
+    size?: ResponsiveValue<"sm" | "md" | "lg">;
+    variant?: "primary" | "secondary" | "danger" | "ghost";
+    options: SelectOption[];
+    placeholder?: string;
+    helperText?: string;
+    error?: string;
+    className?: string;
+}
+declare const Select: React.FC<SelectProps>;
+export default Select;

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+export interface SkeletonProps {
+    variant?: "text" | "circular" | "rectangular" | "card" | "avatar-text" | "button-group";
+    size?: ResponsiveValue<"sm" | "md" | "lg">;
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    lines?: number;
+    animate?: boolean;
+}
+declare const Skeleton: React.FC<SkeletonProps>;
+export default Skeleton;

package/dist/components/TabNavigation.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+export type TabNavigationMode = "scroll" | "wrap" | "dropdown" | "collapsible";
+export interface TabNavigationProps {
+    tabs: readonly string[];
+    activeTab: string;
+    onTabChange: (tab: string) => void;
+    size?: ResponsiveValue<"sm" | "md" | "lg">;
+    mode?: ResponsiveValue<TabNavigationMode>;
+    containerClassName?: string;
+    tabsClassName?: string;
+    dropdownLabel?: React.ReactNode;
+    anchorIcon?: React.ReactNode;
+    showAnchorLabel?: boolean;
+    anchorAriaLabel?: string;
+    closeOnSelect?: boolean;
+    anchorClassName?: string;
+    menuClassName?: string;
+    menuItemClassName?: string;
+}
+declare const TabNavigation: React.FC<TabNavigationProps>;
+export default TabNavigation;

package/dist/components/Toggle.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    label?: string;
+    size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
+    variant?: 'primary' | 'secondary' | 'accent';
+    className?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+declare const Toggle: React.FC<ToggleProps>;
+export default Toggle;

package/dist/components/index.d.ts

@@ -0,0 +1,42 @@
+export { default as HomeTab } from './tabs/HomeTab';
+export { default as InteractiveTab } from './tabs/InteractiveTab';
+export { default as ElementsTab } from './tabs/ElementsTab';
+export { default as FeedbackTab } from './tabs/FeedbackTab';
+export { default as TabNavigation } from './TabNavigation';
+export { default as CircularProgress } from './CircularProgress';
+export { default as SegmentedProgress } from './SegmentedProgress';
+export { default as LinearProgress } from './LinearProgress';
+export { default as Notification } from './Notification';
+export { default as Button } from './Button';
+export { default as Input } from './Input';
+export { default as Card } from './Card';
+export { default as Badge } from './Badge';
+export { default as Toggle } from './Toggle';
+export { default as Select } from './Select';
+export { default as Skeleton } from './Skeleton';
+export { default as Image } from './Image';
+export { default as Carousel } from './Carousel';
+export { default as Modal } from './Modal';
+export type { CircularProgressProps } from './CircularProgress';
+export type { NotificationProps } from './Notification';
+export type { SegmentedProgressProps } from './SegmentedProgress';
+export type { LinearProgressProps } from './LinearProgress';
+export type { TabNavigationProps } from './TabNavigation';
+export type { ButtonProps } from './Button';
+export type { InputProps } from './Input';
+export type { CardProps } from './Card';
+export type { BadgeProps } from './Badge';
+export type { ToggleProps } from './Toggle';
+export type { SelectProps, SelectOption } from './Select';
+export type { SkeletonProps } from './Skeleton';
+export type { ImageProps } from './Image';
+export type { CarouselProps, CarouselImageData } from './Carousel';
+export type { ModalProps, ModalAnimationConfig, ModalCallbacks } from './Modal';
+export type { ResponsiveValue, Breakpoint } from '../utils/responsive';
+export { getResponsiveClasses, combineResponsiveClasses, RESPONSIVE_SIZE_MAPS } from '../utils/responsive';
+export { useCyberScrollbar } from '../hooks/useCyberScrollbar';
+export type { UseCyberScrollbarOptions } from '../hooks/useCyberScrollbar';
+export { useCyberNotifications } from '../hooks/useCyberNotifications';
+export type { CyberNotification, NotificationOptions } from '../hooks/useCyberNotifications';
+export { CyberNotificationProvider } from '../contexts/NotificationContext';
+export type { CyberNotificationProviderProps } from '../contexts/NotificationContext';

package/dist/components/tabs/ElementsTab.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const ElementsTab: React.FC;
+export default ElementsTab;

package/dist/components/tabs/FeedbackTab.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const FeedbackTab: React.FC;
+export default FeedbackTab;

package/dist/components/tabs/HomeTab.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const HomeTab: React.FC;
+export default HomeTab;

package/dist/components/tabs/InteractiveTab.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const InteractiveTab: React.FC;
+export default InteractiveTab;

package/dist/contexts/NotificationContext.d.ts

@@ -0,0 +1,7 @@
+import { default as React, ReactNode } from 'react';
+export interface CyberNotificationProviderProps {
+    children: ReactNode;
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    defaultDuration?: number;
+}
+export declare const CyberNotificationProvider: React.FC<CyberNotificationProviderProps>;

package/dist/contexts/NotificationContextBase.d.ts

@@ -0,0 +1,19 @@
+export interface CyberNotification {
+    id: string;
+    type: "success" | "warning" | "error";
+    title: string;
+    message: string;
+    width?: number;
+    isClosing?: boolean;
+}
+export interface NotificationOptions {
+    autoHide?: boolean;
+    duration?: number;
+}
+export interface NotificationContextType {
+    notifications: CyberNotification[];
+    showNotification: (type: "success" | "warning" | "error", title: string, message: string, options?: NotificationOptions) => string;
+    hideNotification: (id: string) => void;
+    clearAllNotifications: () => void;
+}
+export declare const NotificationContext: import('react').Context<NotificationContextType | undefined>;