jiffy-ui 1.0.2 → 1.0.4

package/README.md

@@ -6,11 +6,11 @@
 [![npm version](https://img.shields.io/npm/v/jiffy-ui.svg)](https://www.npmjs.com/package/jiffy-ui)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
 
-**Jiffy UI Demo** showcases a comprehensive React component library with 35+ production-ready components. Built with modern web standards, TypeScript support, and accessibility in mind.
+**Jiffy UI Demo** showcases a comprehensive React component library with 50+ production-ready components. Built with modern web standards, TypeScript support, and accessibility in mind.
 
 ## ✨ Features
 
-- 🎯 **35+ Production Ready Components** - Comprehensive component library
+- 🎯 **50+ Production Ready Components** - Comprehensive component library
 - 📝 **TypeScript Native** - Fully typed API with excellent DX
 - ♿ **Accessibility First** - WAI-ARIA compliant with keyboard support
 - 🚀 **React Server Components** - Compatible with Next.js 13+ and RSC
@@ -53,38 +53,90 @@ function App() {
 
 ## 🎮 Demo & Documentation
 
-🔗 **[Live Demo](https://jiffytechsolutions.github.io/JiffyDemo/)**
+🔗 **[Live Demo](https://jiffytechsolutions.github.io/jiffy-ui-demo/)**
 
 Explore our interactive component playground to see all components in action with live code examples.
 
 ## 📦 Available Components
 
-### Layout Components
-- **Card** - Flexible containers for content
-- **Grid** - Responsive grid system
-- **HorizontalFlex / VerticalFlex** - Flexbox layout utilities
-
-### Input Components  
-- **TextField** - Text input with validation
-- **TextArea** - Multi-line text input
-- **Checkbox** - Boolean input control
-- **CheckboxGroup** - Multiple selection groups
-- **FileUpload** - File upload component
-- **AutoComplete** - Smart input with suggestions
-
-### Action Components
-- **Button** - Primary action component
-- **ButtonGroup** - Grouped button actions
-- **TextLink** - Styled text links
-
-### Display Components
-- **TextStyle** - Typography component
-- **Accordion** - Collapsible content panels
-- **Alert** - Contextual feedback messages
-- **Sidebar** - Navigation sidebar
-
-### Icons
-- **35+ Icons** - Comprehensive icon set
+### 🏗️ Layout & Structure
+- **AppWrapper** - Application layout wrapper and container
+- **Card** - Flexible containers for content with various styles
+- **FlexLayout** - Modern flexbox layout component with gap controls
+- **Grid** - Responsive grid system for complex layouts
+- **Divider** - Visual separator for content sections
+
+### 🧭 Navigation & Actions
+- **Button** - Primary interactive element with multiple variants
+- **ButtonGroup** - Group related buttons together
+- **ActionList** - Dropdown menu for multiple actions *(Performance Optimized)*
+- **PageTitle** - Page header with title, actions, and navigation *(Recently Redesigned)*
+- **Breadcrumb** - Navigation breadcrumb trail
+- **Pagination** - Navigate through paginated content
+- **Tabs** - Tabbed interface for content organization
+- **TextLink** - Styled text links and navigation elements
+
+### 📝 Form Controls & Input
+- **TextField** - Text input with validation and multiple states
+- **TextArea** - Multi-line text input with auto-resize
+- **Select** - Dropdown selection component
+- **Checkbox** - Single checkbox with label and states
+- **CheckboxGroup** - Multiple checkbox management
+- **Radio** - Single radio button with label
+- **RadioGroup** - Radio button group management
+- **Switcher** - Toggle switch for binary choices
+- **FileUpload** - File upload with drag and drop support
+
+### 📊 Data Display & Visualization
+- **Table** - Feature-rich data table with sorting and selection
+- **List** - Simple list component for displaying items
+- **Avatar** - User profile pictures and initials
+- **Badge** - Status indicators and labels
+- **Tag** - Removable labels and categories
+- **Thumbnail** - Image thumbnails with fallbacks
+- **MediaCard** - Rich media content cards
+- **Indicator** - Status and notification indicators
+
+### 💬 Feedback & Overlays
+- **Alert** - Important messages and notifications
+- **Modal** - Overlay dialogs for important actions
+- **SideSheet** - Slide-out panels for secondary content
+- **BottomSheet** - Mobile-friendly bottom slide-up panels
+- **Tooltip** - Contextual help and information popups
+- **Sidebar** - Navigation sidebar for applications
+- **TopBar** - Application header and navigation
+
+### ⏳ Loading & Progress
+- **ProgressBar** - Progress indication for long operations
+- **Spinner** - Loading indicators with various styles
+- **Skeleton** - Loading placeholders for content
+  - **SkeletonBadge** - Badge loading placeholder
+  - **SkeletonButton** - Button loading placeholder
+  - **SkeletonCustom** - Custom skeleton shapes
+  - **SkeletonLine** - Text line loading placeholder
+  - **SkeletonList** - List loading placeholder
+  - **SkeletonTabs** - Tab loading placeholder
+  - **SkeletonThumbnail** - Image loading placeholder
+
+### 🎨 Typography & Content
+- **TextStyle** - Typography styles and text formatting
+- **Accordion** - Collapsible content sections
+- **CopyClipboard** - One-click copy functionality
+
+### 🔧 Specialized Components
+- **StepWizard** - Multi-step process guidance
+- **Dropdown** - Generic dropdown component with positioning
+
+### 🎯 Foundation Elements
+- **Foundation/Colors** - Color system and palette
+- **Foundation/Icons** - Icon system and guidelines  
+- **Foundation/BorderWidth** - Border width tokens
+- **Foundation/Elevation** - Shadow and elevation system
+- **Foundation/RorderRadius** - Border radius design tokens
+- **Foundation/UsedColor** - Applied color examples
+
+### 🧪 Development & Testing
+- **SimpleTest** - Simple test component for development
 
 ## 🛠️ Development
 
@@ -97,7 +149,7 @@ Explore our interactive component playground to see all components in action wit
 
 ```bash
 # Clone the repository
-git clone https://github.com/JiffytechSolutions/JiffyDemo.git
+git clone https://github.com/JiffytechSolutions/jiffy-ui.git
 
 # Navigate to project directory
 cd JiffyDemo
@@ -116,28 +168,7 @@ npm start
 - `npm test` - Run test suite
 - `npm eject` - Eject from Create React App
 
-## 🏗️ Project Structure
 
-```
-JiffyDemo/
-├── public/
-│   ├── index.html
-│   └── assets/
-├── src/
-│   ├── Components/
-│   │   ├── Banner/           # Hero section
-│   │   ├── ComponentList/    # Component showcase  
-│   │   ├── CallToAction/     # CTA section
-│   │   ├── Header/           # Navigation
-│   │   ├── Home/             # Main page
-│   │   ├── Pannel/           # Component docs
-│   │   └── component/        # Demo components
-│   ├── assets/               # Images and static files
-│   ├── context/              # React context
-│   └── index.tsx
-├── package.json
-└── README.md
-```
 
 ## 🎯 Key Features Showcase
 

package/dist/components/Accordion/Accordion.d.ts

@@ -2,11 +2,22 @@ import React from "react";
 import './accordion.css';
 export interface AccordionI {
     accordionHeader?: string | React.ReactNode;
-    onClick?: any;
-    isExpended: boolean;
+    onClick?: () => void;
+    isExpanded: boolean;
     children?: string | React.ReactNode;
     icon?: React.ReactNode;
     withNumber?: boolean;
+    variant?: 'default' | 'bordered' | 'elevated';
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    className?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    showChevron?: boolean;
+    chevronPosition?: 'left' | 'right';
+    iconPosition?: 'left' | 'right';
+    numberPosition?: 'left' | 'right';
+    number?: number | string;
 }
-declare const Accordion: ({ accordionHeader, onClick, isExpended, children, icon, ...props }: AccordionI) => React.JSX.Element;
+declare const Accordion: ({ accordionHeader, onClick, isExpanded, children, icon, withNumber, variant, size, disabled, className, headerClassName, bodyClassName, showChevron, chevronPosition, iconPosition, numberPosition, number, ...props }: AccordionI) => React.JSX.Element;
 export default Accordion;

package/dist/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,95 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: ({ accordionHeader, onClick, isExpanded, children, icon, withNumber, variant, size, disabled, className, headerClassName, bodyClassName, showChevron, chevronPosition, iconPosition, numberPosition, number, ...props }: import("./Accordion").AccordionI) => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        accordionHeader: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        isExpanded: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        variant: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        size: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        showChevron: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        chevronPosition: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        iconPosition: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        withNumber: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        numberPosition: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        number: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const Variants: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const WithIcons: () => React.JSX.Element;
+export declare const WithNumbers: () => React.JSX.Element;
+export declare const ChevronPositions: () => React.JSX.Element;
+export declare const DisabledState: () => React.JSX.Element;
+export declare const ComplexExample: () => React.JSX.Element;
+export declare const FAQExample: () => React.JSX.Element;

package/dist/components/Actionlist/Actionlist.d.ts

@@ -1,18 +1,112 @@
-import "./actionlist.css";
 import React from "react";
-export interface ActionListI {
-    open: boolean;
+import "./actionlist.css";
+export interface ActionItem {
+    /** Unique identifier */
+    id?: string | number;
+    /** Item label/text */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Leading icon or element */
+    leading?: React.ReactNode;
+    /** Trailing icon or element */
+    trailing?: React.ReactNode;
+    /** Badge text */
+    badge?: string | number;
+    /** Badge variant */
+    badgeVariant?: "default" | "primary" | "success" | "warning" | "error";
+    /** Keyboard shortcut display */
+    shortcut?: string;
+    /** Visual variant */
+    variant?: "default" | "primary" | "secondary" | "destructive";
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Whether item is destructive (red styling) */
+    destructive?: boolean;
+    /** Whether item is selected */
+    selected?: boolean;
+    /** Custom class names */
+    className?: string;
+}
+export interface ActionGroup {
+    /** Unique identifier */
+    id?: string | number;
+    /** Group title */
+    title?: string;
+    /** Items in this group */
+    items: ActionItem[];
+    /** Whether to show separator after this group */
+    separator?: boolean;
+    /** Whether entire group is disabled */
+    disabled?: boolean;
+}
+export interface ActionListProps {
+    /** Trigger element */
+    children: React.ReactElement;
+    /** Action items or groups */
+    items: (ActionItem | ActionGroup)[];
+    /** Trigger behavior */
+    trigger?: "click" | "hover" | "focus";
+    /** Placement relative to trigger */
+    placement?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
+    /** Size of the action list */
+    size?: "Small" | "Medium" | "Large";
+    /** Visual variant */
+    variant?: "Default" | "Bordered" | "Elevated";
+    /** Whether the action list is disabled */
+    disabled?: boolean;
+    /** Whether to close on item selection */
+    closeOnSelect?: boolean;
+    /** Maximum height of dropdown */
+    maxHeight?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+    /** Item selection handler */
+    onItemSelect?: (item: ActionItem) => void;
+    /** Open/close state change handler */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional HTML attributes */
+    [key: string]: any;
+}
+export interface ActionListI extends Omit<ActionListProps, 'children' | 'items'> {
+    /** @deprecated Use children instead */
     activator: React.ReactNode;
+    /** @deprecated Use items instead */
     options: ActionListObjI[];
+    /** @deprecated Use isOpen state internally */
+    open: boolean;
+    /** @deprecated Use onOpenChange instead */
     onClose: () => void;
+    /** @deprecated Use placement instead */
     direction?: "left" | "right" | "auto";
+    /** @deprecated Use variant instead */
+    variant?: "default" | "bordered" | "elevated";
+    /** @deprecated Use size instead */
+    size?: "small" | "medium" | "large";
+    /** @deprecated Use maxHeight instead */
+    maxHeight?: string | number;
+    /** @deprecated Use style.width instead */
+    width?: string | number;
+    /** @deprecated Use className instead */
+    itemClassName?: string;
+    /** @deprecated Use className instead */
+    titleClassName?: string;
+    /** @deprecated Use separator in groups instead */
+    showDividers?: boolean;
 }
 export interface ActionListObjI {
+    /** @deprecated Use ActionGroup instead */
     title?: string;
     id?: number | string;
     items: ActionListItemsI[];
+    disabled?: boolean;
 }
 export interface ActionListItemsI {
+    /** @deprecated Use ActionItem instead */
     id?: number | string;
     content?: string;
     destructive?: boolean;
@@ -21,6 +115,12 @@ export interface ActionListItemsI {
     prefixIcon?: React.ReactNode;
     suffixIcon?: React.ReactNode;
     isDisabled?: boolean;
+    variant?: "default" | "primary" | "secondary" | "destructive";
+    size?: "small" | "medium" | "large";
+    badge?: string | number;
+    badgeVariant?: "default" | "primary" | "success" | "warning" | "error";
+    divider?: boolean;
 }
-export declare const Actionlist: React.ForwardRefExoticComponent<ActionListI & React.RefAttributes<unknown>>;
-export default Actionlist;
+declare const ActionList: ({ children, items, trigger, placement, size, variant, disabled, closeOnSelect, maxHeight, className, style, onItemSelect, onOpenChange, ...props }: ActionListProps) => React.JSX.Element;
+export default ActionList;
+export { ActionList as Actionlist };

package/dist/components/Actionlist/Actionlist.stories.d.ts

@@ -1,11 +1,72 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./Actionlist").ActionListI & React.RefAttributes<unknown>>;
+    component: ({ children, items, trigger, placement, size, variant, disabled, closeOnSelect, maxHeight, className, style, onItemSelect, onOpenChange, ...props }: import("./Actionlist").ActionListProps) => React.JSX.Element;
     tags: string[];
+    argTypes: {
+        trigger: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+            defaultValue: string;
+        };
+        placement: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+            defaultValue: string;
+        };
+        size: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+            defaultValue: string;
+        };
+        variant: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+            defaultValue: string;
+        };
+        disabled: {
+            description: string;
+            control: {
+                type: string;
+            };
+            defaultValue: boolean;
+        };
+        closeOnSelect: {
+            description: string;
+            control: {
+                type: string;
+            };
+            defaultValue: boolean;
+        };
+    };
+    args: {
+        trigger: string;
+        placement: string;
+        size: string;
+        variant: string;
+        disabled: boolean;
+        closeOnSelect: boolean;
+    };
 };
 export default _default;
-export declare const Default: ({ ...rest }: {
+export declare const Primary: ({ ...rest }: {
     [x: string]: any;
 }) => React.JSX.Element;
-export declare const ActionList_with_GroupedOption: any;
+export declare const SimpleTest: () => React.JSX.Element;
+export declare const ActionList_basic_examples: any;
+export declare const ActionList_different_sizes: any;
+export declare const ActionList_different_variants: any;
+export declare const ActionList_grouped_actions: any;
+export declare const ActionList_different_states: any;

package/dist/components/Alert/Alert.d.ts

@@ -1,16 +1,27 @@
 import React from "react";
+import type { ButtonI } from "../Button/Button";
 import "./alert.css";
-import { ButtonI } from "../Button/Button";
-import { TextLinkI } from "../TextLink/TextLink";
-declare const Alert: ({ title, description, color, emphasis, onDismiss, icon, secondaryAction, primaryAction, ...props }: AlertI) => React.JSX.Element;
-export interface AlertI {
+declare const Alert: ({ children, title, variant, emphasis, onDismiss, primaryAction, secondaryAction, className, style, ...props }: AlertProps) => React.JSX.Element;
+export interface AlertProps {
+    /** Alert content */
+    children?: React.ReactNode;
+    /** Alert title */
     title?: string;
-    description: React.ReactNode | string;
-    color: "Primary" | "Positive" | "Negative" | "Waiting" | "Neutral";
-    emphasis?: "Subtile" | "Intense";
+    /** Visual variant of the alert */
+    variant?: "default" | "success" | "error" | "warning" | "info";
+    /** Emphasis level */
+    emphasis?: "Subtle" | "Intense";
+    /** Callback when dismiss button is clicked */
     onDismiss?: () => void;
+    /** Primary action button configuration */
     primaryAction?: ButtonI;
-    secondaryAction?: TextLinkI;
-    icon: React.ReactNode;
+    /** Secondary action button configuration */
+    secondaryAction?: ButtonI;
+    /** Additional CSS classes */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+    /** Additional HTML attributes */
+    [key: string]: any;
 }
 export default Alert;

package/dist/components/Alert/Alert.stories.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: ({ title, description, color, emphasis, onDismiss, icon, secondaryAction, primaryAction, ...props }: import("./Alert").AlertI) => React.JSX.Element;
+    component: ({ children, title, variant, emphasis, onDismiss, primaryAction, secondaryAction, className, style, ...props }: import("./Alert").AlertProps) => React.JSX.Element;
     tags: string[];
     argTypes: {
         title: {
@@ -11,14 +11,14 @@ declare const _default: {
             };
             defaultValue: string;
         };
-        description: {
+        children: {
             description: string;
             control: {
                 type: string;
             };
             defaultValue: string;
         };
-        color: {
+        variant: {
             description: string;
             control: {
                 type: string;
@@ -34,13 +34,19 @@ declare const _default: {
             };
             defaultValue: string;
         };
-        onDismiss: {};
+    };
+    args: {
+        title: string;
+        children: string;
+        variant: string;
+        emphasis: string;
     };
 };
 export default _default;
 export declare const Primary: ({ ...rest }: {
     [x: string]: any;
 }) => React.JSX.Element;
-export declare const Alert_without_action: any;
-export declare const Alert_with_multiple_color: any;
-export declare const Alert_with_multiple_color_and_Intense: any;
+export declare const Alert_with_multiple_variants: any;
+export declare const Alert_with_emphasis_levels: any;
+export declare const Alert_with_dismiss_action: any;
+export declare const Alert_with_primary_and_secondary_actions: any;

package/dist/components/AppWrapper/AppWrapper.stories.d.ts

@@ -2,7 +2,11 @@ import React from "react";
 declare const _default: {
     title: string;
     component: ({ topBar, sideBar, footer, announcementBar, content, ...props }: import("./AppWrapper").AppWrapperI) => React.JSX.Element;
-    tags: string[];
+    parameters: {
+        docs: {
+            autodocs: boolean;
+        };
+    };
     argTypes: {};
 };
 export default _default;

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -2,7 +2,11 @@ import React from "react";
 declare const _default: {
     title: string;
     component: ({ size, shape, label, icon, srcIco, indicator, onClick, ...props }: import("./Avatar").AvatarI) => React.JSX.Element;
-    tags: string[];
+    parameters: {
+        docs: {
+            autodocs: boolean;
+        };
+    };
     argTypes: {
         size: {
             description: string;

package/dist/components/Badge/Badge.d.ts

@@ -1,11 +1,33 @@
 import React from "react";
 import "./badge.css";
-declare const Badge: ({ size, color, children, type, emphasis, ...props }: BadgeI) => React.JSX.Element;
-export interface BadgeI {
-    size?: "Small" | "Medium" | "Large";
-    color: "Primary" | "Positive" | "Negative" | "Notice" | "Neutral";
-    type?: "Partial" | "Full" | "None";
-    emphasis?: "Subtile" | "Intense" | "OutLine";
-    children?: string;
+declare const Badge: ({ children, tone, size, progress, icon, className, style, disabled, ...props }: BadgeProps) => React.JSX.Element;
+export interface BadgeProps {
+    /** Badge content */
+    children: React.ReactNode;
+    /** Tone of the badge */
+    tone?: "default" | "success" | "attention" | "warning" | "critical" | "info";
+    /** Size of the badge */
+    size?: "default" | "small";
+    /** Progress state */
+    progress?: "incomplete" | "partiallyComplete" | "complete";
+    /** Custom icon component or icon name */
+    icon?: React.ComponentType<{
+        size?: number;
+    }> | "success" | "error" | "warning" | "info" | "pending" | "default";
+    /** Additional CSS classes */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+    /** Whether the badge is disabled */
+    disabled?: boolean;
+    /** Click handler for the badge */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Accessibility label */
+    "aria-label"?: string;
+    /** Additional HTML attributes */
+    [key: string]: any;
 }
+export type BadgeSize = "default" | "small";
+export type BadgeTone = "default" | "success" | "attention" | "warning" | "critical" | "info";
+export type BadgeProgress = "incomplete" | "partiallyComplete" | "complete";
 export default Badge;