cyberui-2045 1.3.3 → 1.4.0

package/AGENT.md

@@ -39,6 +39,12 @@ import "cyberui-2045/styles.css";
 | `Skeleton` | Loading placeholder. |
 | `Image` | Image with cyberpunk frame/effects. |
 | `Carousel` | Image carousel. |
+| `Checkbox` | Neon-styled checkbox with SVG icons. |
+| `Divider` | Gradient/solid/dashed content separator. |
+| `GradientText` | Text with cyberpunk gradient effects. |
+| `SectionTitle` | Title with decorative gradient line. |
+| `Steps` | Multi-step progress indicator. |
+| `Timeline` | Vertical event history display. |
 
 ## 4. Usage Patterns (Few-Shot)
 

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+/**
+ * A cyberpunk-styled checkbox with neon glow effects.
+ *
+ * Features a custom SVG checkbox with a cut corner design, matching the cyberpunk aesthetic.
+ * Supports both controlled and uncontrolled modes.
+ *
+ * @example
+ * // Basic checkbox
+ * <Checkbox label="Accept terms" />
+ *
+ * @example
+ * // Controlled checkbox
+ * <Checkbox
+ *   label="Enable notifications"
+ *   checked={isEnabled}
+ *   onChange={(e) => setIsEnabled(e.target.checked)}
+ * />
+ *
+ * @example
+ * // With error message
+ * <Checkbox
+ *   label="Required field"
+ *   error="This field is required"
+ * />
+ */
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * Label text displayed next to the checkbox.
+     */
+    label?: string;
+    /**
+     * Error message to display below the checkbox.
+     */
+    error?: string;
+    /**
+     * Size of the checkbox. Supports responsive values.
+     * @default 'md'
+     */
+    size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+}
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/dist/components/Divider.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+/**
+ * A decorative divider with cyberpunk styling.
+ *
+ * Supports multiple visual variants and both horizontal and vertical orientations.
+ *
+ * @example
+ * // Gradient divider (default)
+ * <Divider />
+ *
+ * @example
+ * // Solid divider
+ * <Divider variant="solid" />
+ *
+ * @example
+ * // Dashed divider
+ * <Divider variant="dashed" />
+ *
+ * @example
+ * // Vertical divider
+ * <Divider orientation="vertical" className="h-8" />
+ */
+export interface DividerProps {
+    /**
+     * Visual style of the divider.
+     * - `gradient`: Gradient fade from center (default).
+     * - `solid`: Solid semi-transparent line.
+     * - `dashed`: Dashed border style.
+     * @default 'gradient'
+     */
+    variant?: 'gradient' | 'solid' | 'dashed';
+    /**
+     * Orientation of the divider.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+}
+declare const Divider: React.FC<DividerProps>;
+export default Divider;

package/dist/components/GradientText.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+/**
+ * A component for rendering text with a neon gradient effect.
+ *
+ * @example
+ * // Default cyan-purple gradient
+ * <GradientText as="h1" className="text-4xl font-bold">
+ *   CyberUI 2045
+ * </GradientText>
+ *
+ * @example
+ * // Secondary pink-purple gradient
+ * <GradientText variant="secondary">
+ *   System Critical
+ * </GradientText>
+ *
+ * @example
+ * // Accent gradient for warnings
+ * <GradientText variant="accent" as="p">
+ *   Warning Level
+ * </GradientText>
+ */
+export interface GradientTextProps {
+    /**
+     * The text content to render.
+     */
+    children: React.ReactNode;
+    /**
+     * Visual style of the gradient.
+     * - `primary`: Cyan to pink gradient (secondary → primary).
+     * - `secondary`: Pink to yellow gradient (primary → accent).
+     * - `accent`: Yellow to cyan gradient (accent → secondary).
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'accent';
+    /**
+     * The HTML element to render as.
+     * @default 'span'
+     */
+    as?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div';
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+}
+declare const GradientText: React.FC<GradientTextProps>;
+export default GradientText;

package/dist/components/SectionTitle.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+/**
+ * A standardized section title with cyberpunk styling.
+ *
+ * Features uppercase text, wide letter spacing, and an optional decorative gradient line.
+ *
+ * @example
+ * // Standard title with gradient line
+ * <SectionTitle>System Status</SectionTitle>
+ *
+ * @example
+ * // Title without decorative line
+ * <SectionTitle showLine={false}>Heading Only</SectionTitle>
+ *
+ * @example
+ * // With custom styling
+ * <SectionTitle className="mb-8">Custom Spacing</SectionTitle>
+ */
+export interface SectionTitleProps {
+    /**
+     * The title text content.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to show a decorative gradient line after the title.
+     * @default true
+     */
+    showLine?: boolean;
+    /**
+     * Size of the section title. Supports responsive values.
+     * @default 'md'
+     */
+    size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+}
+declare const SectionTitle: React.FC<SectionTitleProps>;
+export default SectionTitle;

package/dist/components/Steps.d.ts

@@ -0,0 +1,75 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+/**
+ * Individual step item data.
+ */
+export interface StepItem {
+    /**
+     * Step title.
+     */
+    title: string;
+    /**
+     * Optional step description.
+     */
+    description?: string;
+    /**
+     * Step status for explicit control. If not provided, status is derived from `current` prop.
+     */
+    status?: 'pending' | 'current' | 'completed' | 'error';
+}
+/**
+ * A horizontal stepper component for multi-step processes.
+ *
+ * Styled with half-diamond indicators for current step, gradient underlines for completed steps,
+ * and animated chevron separators.
+ *
+ * @example
+ * // Basic steps with current index
+ * <Steps
+ *   current={1}
+ *   items={[
+ *     { title: "Login" },
+ *     { title: "Verify" },
+ *     { title: "Complete" }
+ *   ]}
+ * />
+ *
+ * @example
+ * // With descriptions and explicit status
+ * <Steps
+ *   items={[
+ *     { title: "Login", description: "Enter credentials", status: "completed" },
+ *     { title: "Verify", description: "2FA authentication", status: "current" },
+ *     { title: "Complete", description: "Access granted", status: "pending" }
+ *   ]}
+ * />
+ *
+ * @example
+ * // Responsive orientation (vertical on mobile, horizontal on desktop)
+ * <Steps
+ *   orientation={{ base: 'vertical', md: 'horizontal' }}
+ *   items={[...]}
+ * />
+ */
+export interface StepsProps {
+    /**
+     * Array of step items to display.
+     */
+    items: StepItem[];
+    /**
+     * Current active step index (0-based). Used to derive status when individual step status is not set.
+     * @default 0
+     */
+    current?: number;
+    /**
+     * Layout orientation. Supports responsive values.
+     * @default { base: 'vertical', md: 'horizontal' }
+     */
+    orientation?: ResponsiveValue<'horizontal' | 'vertical'>;
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+}
+declare const Steps: React.FC<StepsProps>;
+export default Steps;

package/dist/components/Timeline.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from '../utils/responsive';
+/**
+ * Individual timeline event data.
+ */
+export interface TimelineEvent {
+    /**
+     * Event title.
+     */
+    title: string;
+    /**
+     * Optional event description.
+     */
+    description?: string;
+    /**
+     * Event timestamp display string.
+     */
+    time: string;
+    /**
+     * Event status/type for visual styling.
+     * @default 'info'
+     */
+    status?: 'success' | 'error' | 'warning' | 'info';
+}
+/**
+ * A vertical timeline component for displaying activity feeds or event logs.
+ *
+ * Features diamond-shaped status indicators with neon glow effects.
+ *
+ * @example
+ * // Basic timeline
+ * <Timeline events={[
+ *   {
+ *     title: "System Initialized",
+ *     description: "All modules loaded successfully",
+ *     time: "2 min ago",
+ *     status: "success"
+ *   },
+ *   {
+ *     title: "Warning Detected",
+ *     time: "5 min ago",
+ *     status: "warning"
+ *   }
+ * ]} />
+ *
+ * @example
+ * // Mixed status events
+ * <Timeline events={[
+ *   { title: "Connected", time: "Now", status: "success" },
+ *   { title: "High Memory", time: "1m ago", status: "warning" },
+ *   { title: "Connection Lost", time: "5m ago", status: "error" }
+ * ]} />
+ */
+export interface TimelineProps {
+    /**
+     * Array of timeline events to display.
+     */
+    events: TimelineEvent[];
+    /**
+     * Size of the timeline. Supports responsive values.
+     * @default 'md'
+     */
+    size?: ResponsiveValue<'sm' | 'md' | 'lg'>;
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+}
+declare const Timeline: React.FC<TimelineProps>;
+export default Timeline;

package/dist/components/index.d.ts

@@ -1,7 +1,3 @@
-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';
@@ -17,6 +13,12 @@ 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 { default as GradientText } from './GradientText';
+export { default as SectionTitle } from './SectionTitle';
+export { default as Timeline } from './Timeline';
+export { default as Steps } from './Steps';
+export { default as Divider } from './Divider';
+export { default as Checkbox } from './Checkbox';
 export type { CircularProgressProps } from './CircularProgress';
 export type { NotificationProps } from './Notification';
 export type { SegmentedProgressProps } from './SegmentedProgress';
@@ -32,6 +34,12 @@ 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 { GradientTextProps } from './GradientText';
+export type { SectionTitleProps } from './SectionTitle';
+export type { TimelineProps, TimelineEvent } from './Timeline';
+export type { StepsProps, StepItem } from './Steps';
+export type { DividerProps } from './Divider';
+export type { CheckboxProps } from './Checkbox';
 export type { ResponsiveValue, Breakpoint } from '../utils/responsive';
 export { getResponsiveClasses, combineResponsiveClasses, RESPONSIVE_SIZE_MAPS } from '../utils/responsive';
 export { useCyberScrollbar } from '../hooks/useCyberScrollbar';