PaySky-Ui-Library

A customizable React UI component library built with Material-UI for PaySky applications.

Installation

npm install paysky-ui-library

Dependencies

This library requires the following peer dependencies:

"react": "^18.0.0",
"react-dom": "^18.0.0",
"@mui/material": "^5.0.0",
"@mui/icons-material": "^5.0.0"

Usage

There are two approaches to apply your project's theme to PaySky UI components:

Approach 1: Use default library theme

Each PaySky UI component accepts a color prop that allows you to choose one of the default colors defined in theme:

import { PayskyButton } from 'paysky-ui-library';
import theme from './theme';

function MyComponent() {
  return (
    <PayskyButton 
      variant="contained"
      color='primary' // orange color
      text="Button with Project Theme"
    />
  );
}

Approach 2: Pass Custom Colors Directly

Each PaySky UI component accepts a colors prop that allows you to override the default colors:

import { PayskyButton } from 'paysky-ui-library';
import theme from './theme';

function MyComponent() {
  return (
    <PayskyButton 
      variant="contained"
      colors={{
        primary: '#E9DCBE'
      }}
      text="Button with Project Theme"
    />
  );
}

Approach 3: Create a Your custom Theme Adapter (Recommended)

This approach creates wrapper components that automatically apply your project's theme colors to all PaySky UI components. This is the recommended approach for consistent theming across your application.

Step 1: Create a Theme Adapter File

Create a file called payskyThemeAdapter.tsx (or similar) in your project:

import React, { createContext, useContext, ReactNode } from 'react';
import { ThemeColors } from 'paysky-ui-library/dist/types';
import { PayskyButton, PayskyGradientSpinner, PayskyIconForm, PayskyPagination } from 'paysky-ui-library';

// Import types for re-export
import type { ButtonVariant, ButtonColor, ButtonType } from 'paysky-ui-library';
export type { ButtonVariant, ButtonColor, ButtonType };

// Function to get theme colors from your project's theme
export const getPayskyThemeColors = () => {
  // Replace with your actual theme import
  const palette = yourProjectTheme.palette;
  
  return {
    dark: palette.primary.main,
    gray: palette.secondary.main,
    beige: palette.background.paper,
    light: palette.background.default,
    primary: palette.primary.main,
    secondary: palette.secondary.main,
    success: palette.success.main,
    error: palette.error.main,
    warning: palette.warning.main,
    info: palette.info.main,
  };
};

// Pre-created theme colors object
export const payskyThemeColors = getPayskyThemeColors();

// Create a context to provide the theme colors
const PayskyThemeContext = createContext<ThemeColors>(payskyThemeColors);

interface PayskyThemeProviderProps {
  children: ReactNode;
  customColors?: ThemeColors;
}

// Provider component to wrap PaySky UI components
export const PayskyThemeProvider: React.FC<PayskyThemeProviderProps> = ({ 
  children, 
  customColors 
}) => {
  const themeColors = customColors || payskyThemeColors;
  
  return (
    <PayskyThemeContext.Provider value={themeColors}>
      {children}
    </PayskyThemeContext.Provider>
  );
};

// Hook to use the PaySky theme colors
export const usePayskyTheme = () => useContext(PayskyThemeContext);

Step 2: Update Your App Wrapper

Update your _app.tsx (or similar entry point) to include the PayskyThemeProvider:

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from './theme';
import { PayskyThemeProvider } from './payskyThemeAdapter';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <PayskyThemeProvider>
        <Component {...pageProps} />
      </PayskyThemeProvider>
    </ThemeProvider>
  );
}

export default MyApp;

Step 3: Use Themed Components in Your Application

Now you can use the themed components throughout your application:

import { PayskyButton } from 'paysky-ui-library';

function MyComponent() {
  return (
    <div>
      <PayskyButton 
        variant="contained"
        colors={
          primary: primary: theme.palette.primary.main, // my defined theme color
        } 
        text="Button with Project Theme"
      />
    </div>
  );
}

Note: You alternatively can create a shared component (as a wrapper to the library component) and use it across your app.

Custom Styling with the sx Prop

In addition to theme integration, all components in the PaySky UI Library support custom styling through the Material UI sx prop. This allows for consistent and flexible styling across all components.

Basic Usage

The sx prop accepts a style object with CSS properties in camelCase format:

<PayskyButton 
  variant="contained" 
  color="primary" 
  text="Custom Button" 
  sx={{
    borderRadius: '25px',
    fontWeight: 'bold',
    padding: '12px 24px',
    boxShadow: '0 4px 8px rgba(0,0,0,0.2)'
  }}
/>

Advanced Usage

You can also use the sx prop to override MUI theme properties and access nested components:

<PayskyDataGrid
  rows={rows}
  columns={columns}
  sx={{
    '& .MuiDataGrid-cell': {
      fontFamily: 'Cairo, sans-serif',
      fontSize: '14px'
    },
    '& .MuiDataGrid-columnHeaders': {
      backgroundColor: '#f5f5f5'
    }
  }}
/>

Colors and Backgrounds

You can easily customize background colors, text colors, and other color properties:

<PayskyFormLayout
  title="Color Styling Example"
  fields={formFields}
  sx={{
    // Background colors
    backgroundColor: '#f8f8f8',          // Basic background color
    background: 'linear-gradient(45deg, #f3f3f3 30%, #e9e9e9 90%)',  // Gradient background
    
    // Text colors
    color: '#333333',                     // Basic text color
    
    // Background with opacity
    bgcolor: 'rgba(25, 118, 210, 0.08)',  // Background with opacity (shorthand)
    
    // Hover states
    '&:hover': {
      backgroundColor: '#e3f2fd',          // Background color on hover
      color: '#1565c0'                     // Text color on hover
    },
    
    // Apply to specific children elements
    '& .MuiCardHeader-title': {
      color: '#1976d2',                    // Color for card title
      fontWeight: 600
    },
    
    // Border colors
    border: '1px solid #bbdefb',           // Border with color
    borderColor: '#1976d2',                // Just the border color
    
    // Custom text highlighting
    '& .highlight': {
      backgroundColor: '#fff59d',           // Highlight background
      color: '#f57f17'                     // Highlight text color
    }
  }}
/>

Note: You can use any valid CSS color format including hex (#fff), RGB (rgb(255, 255, 255)), RGBA (rgba(255, 255, 255, 0.5)), HSL (hsl(0, 0%, 100%)), and color names (white).

Responsive Styling

You can apply responsive styling using breakpoints:

<PayskyFormLayout
  title="Responsive Form"
  fields={formFields}
  sx={{
    width: {
      xs: '100%',       // on extra small screens
      sm: '85%',        // on small screens and up
      md: '75%',        // on medium screens and up
      lg: '60%'         // on large screens and up
    },
    margin: {
      xs: '0 auto',
      md: '2rem auto'
    }
  }}
/>

Combining with Theme Colors

The sx prop can be combined with the component's color properties:

<PayskyMenus
  colors={{
    dark: '#343434',
    gray: '#8E8B82',
    beige: '#E9DCBE'
  }}
  sx={{
    fontFamily: 'Roboto, sans-serif',
    border: '1px solid #eaeaea',
    borderRadius: '8px'
  }}
/>

Spacing and Positioning (Margin & Padding)

You can add margin and padding in all directions using various approaches:

<PayskyCard
  title="Spacing Example"
  sx={{
    // Method 1: Shorthand for all sides
    margin: 2,                     // Applies margin of theme.spacing(2) to all sides
    padding: '16px',               // Applies 16px padding to all sides
    
    // Method 2: Individual sides
    marginTop: 3,                  // theme.spacing(3) at the top
    marginRight: '24px',           // 24px at the right
    marginBottom: '2rem',          // 2rem at the bottom
    marginLeft: 4,                 // theme.spacing(4) at the left
    
    paddingTop: 2,                 // theme.spacing(2) at the top
    paddingRight: '16px',          // 16px at the right
    paddingBottom: '1.5rem',       // 1.5rem at the bottom
    paddingLeft: 3,                // theme.spacing(3) at the left
    
    // Method 3: Shorthand for X and Y axes
    mx: 2,                         // Margin on x-axis (left & right) theme.spacing(2)
    my: '16px',                    // Margin on y-axis (top & bottom) 16px
    px: 3,                         // Padding on x-axis (left & right) theme.spacing(3)
    py: '24px',                    // Padding on y-axis (top & bottom) 24px
    
    // Method 4: Specific directions with shorthand
    mt: 2,                         // Margin top
    mr: '16px',                    // Margin right
    mb: '1rem',                    // Margin bottom
    ml: 3,                         // Margin left
    
    pt: 2,                         // Padding top
    pr: '16px',                    // Padding right
    pb: '1rem',                    // Padding bottom
    pl: 3,                         // Padding left
  }}
/>

Note: When using numeric values like margin: 2, MUI multiplies this by the theme's spacing unit (typically 8px by default), so margin: 2 equals margin: 16px

All Available Components

PayskyGradientSpinner

A customizable gradient spinner component.

<PayskyGradientSpinner 
  size={60} 
  thickness={4}
  colors={{
    dark: '#000000',
    gray: '#777777',
    beige: '#D8C9A7',
    light: '#FFFFFF'
  }}
/>

PayskyButton

A single, customizable button component that can be used directly.

// Using individual buttons directly
import { PayskyButton } from 'paysky-ui-library';

// Contained button with predefined color
<PayskyButton 
  variant="contained"
  color="dark"
  text="Custom Button"
  onClick={(variant, color) => console.log(`Clicked ${variant} ${color} button`)}
/>

// Using direct string color (hex)
<PayskyButton 
  variant="contained" 
  color="#FF5722"  // Custom orange color
  text="Custom Color Button" 
/>

// Outlined button
<PayskyButton 
  variant="outlined"
  color="gray"
  text="Outlined Button"
/>

// Text button
<PayskyButton 
  variant="text"
  color="beige"
  text="Text Button"
/>

// With custom colors
<PayskyButton 
  variant="contained"
  color="dark"
  colors={{
    dark: '#000000',
    gray: '#777777',
    beige: '#D8C9A7',
  }}
  text="Custom Colors"
/>

PayskyAlert

A single, customizable alert component that can be used directly.

// Using individual alerts directly
import { PayskyAlert } from 'paysky-ui-library';

// Error alert
<PayskyAlert 
  severity="error"
  message="Custom error message"
/>

// Warning alert
<PayskyAlert 
  severity="warning"
  message="Custom warning message"
/>

// Info alert
<PayskyAlert 
  severity="info"
  message="Custom info message"
/>

// Success alert
<PayskyAlert 
  severity="success"
  message="Custom success message"
/>

// With custom title
<PayskyAlert 
  severity="error"
  title="Custom Title"
  message="Alert with custom title"
/>

// With additional styling
<PayskyAlert 
  severity="success"
  message="Alert with custom styling"
  sx={{ fontWeight: 'bold', borderRadius: '8px' }}
/>

PayskyChip

A single, customizable chip component that can be used directly.

// Using individual chips directly
import { PayskyChip } from 'paysky-ui-library';

// Basic chip
<PayskyChip 
  type="basic"
  color="dark"
  label="Dark Chip"
  onClick={(type, color) => console.log(`Clicked ${type} ${color} chip`)}
/>

// Using predefined color
<PayskyChip type="basic" color="beige" />

// Using direct string color (hex)
<PayskyChip type="basic" color="#FF5722" />

// Using RGB color format
<PayskyChip type="outlined" color="rgb(33, 150, 243)" />

// Using RGBA color format
<PayskyChip type="withIcon" color="rgba(156, 39, 176, 0.9)" />

// Using standard CSS color name
<PayskyChip type="avatar" color="teal" />

// Customizing the entire colors object
<PayskyChip 
  type="deletable" 
  color="dark"
  colors={{
    dark: "#2E2E2E",
    gray: "#777777",
    beige: "#F5F5DC"
  }}
/>

// Outlined chip
<PayskyChip 
  type="outlined"
  color="gray"
  label="Outlined Chip"
/>

// Chip with icon
<PayskyChip 
  type="withIcon"
  color="beige"
  label="Icon Chip"
/>

// Deletable chip
<PayskyChip 
  type="deletable"
  color="dark"
  label="Deletable"
  onDelete={(color) => console.log(`Deleted ${color} chip`)}
/>

// Avatar chip
<PayskyChip 
  type="avatar"
  color="gray"
  label="Avatar Chip"
  avatarContent="A"
/>

// Status chip
<PayskyChip 
  type="status"
  color="active"
  label="Active"
/>

PayskyMenu

A single, customizable menu component that can be used directly.

// Using individual menus directly
import { PayskyMenu } from 'paysky-ui-library';

// Basic menu (with default colors)
<PayskyMenu 
  type="basic"
  buttonLabel="Basic Menu"
  items={["Profile", "My account", "Logout"]}
  onMenuItemClick={(type, item) => console.log(`Clicked ${item} in ${type} menu`)}
/>

// Using direct string color
<PayskyMenu type="dropdown" colors="#FF5722" />

// Using custom colors object
<PayskyMenu 
  type="profile" 
  colors={{
    primary: '#2196F3',
    dark: '#1565C0',
    gray: '#607D8B',
    beige: '#E3F2FD'
  }} 
/>

// Menu with icons
<PayskyMenu 
  type="withIcons"
  buttonLabel="Menu with Icons"
  items={["Cut", "Copy", "Paste", "Cloud Storage"]}
/>

// Profile menu
<PayskyMenu 
  type="profile"
  profileInfo={{
    name: "User Name",
    email: "[email protected]",
    profile: "View Profile",
    settings: "Preferences",
    logout: "Sign Out"
  }}
/>

// Dropdown menu
<PayskyMenu 
  type="dropdown"
  buttonLabel="Options"
  items={["Dashboard", "Reports", "Projects", "Help"]}
/>

// With custom colors
<PayskyMenu 
  type="basic"
  buttonLabel="Custom Colors"
  items={["Item 1", "Item 2", "Item 3"]}
  colors={{
    dark: '#000000',
    gray: '#777777',
    beige: '#D8C9A7'
  }}
/>

PayskyPaginationItem

A single, customizable pagination component that can be used directly.

// Using individual pagination components directly
import { PayskyPaginationItem } from 'paysky-ui-library';

// Basic pagination
<PayskyPaginationItem 
  type="basic"
  count={10}
  page={1}
  onPageChange={(type, page) => console.log(`Changed to page ${page} in ${type} pagination`)}
/>

// Outlined pagination
<PayskyPaginationItem 
  type="outlined"
  count={10}
  page={1}
/>

// Rounded pagination
<PayskyPaginationItem 
  type="rounded"
  count={10}
  page={1}
/>

// Different sizes
<PayskyPaginationItem type="small" count={10} page={1} />
<PayskyPaginationItem type="medium" count={10} page={1} />
<PayskyPaginationItem type="large" count={10} page={1} />

// Custom styled pagination with icons
<PayskyPaginationItem 
  type="custom"
  count={10}
  page={1}
  colors={{
    dark: '#000000',
    gray: '#777777',
    beige: '#D8C9A7'
  }}
/>

// With custom styling
<PayskyPaginationItem 
  type="basic"
  count={10}
  page={1}
  sx={{ 
    '& .MuiPaginationItem-root': { 
      borderRadius: '4px',
      margin: '0 2px'
    } 
  }}
/>

PayskyPagination

A component to display various types of pagination in grouped sections.

<PayskyPagination 
  colors={{
    dark: '#000000',
    gray: '#777777',
    beige: '#D8C9A7'
  }}
  showBasic={true}
  showOutlined={true}
  showRounded={true}
  showSizes={true}
  showCustom={true}
  count={10}
  initialPage={1}
  onPageChange={(section, page) => console.log(`Changed to page ${page} in ${section} pagination`)}
/>

PayskyDataGrid

A fully customizable data grid component with search, export, and pagination functionality.

import { PayskyDataGrid } from 'paysky-ui-library';

// Basic usage
<PayskyDataGrid 
  title="Users Table"
  rows={[
    { id: 1, name: 'John Doe', email: '[email protected]', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: '[email protected]', role: 'User' },
    { id: 3, name: 'Bob Johnson', email: '[email protected]', role: 'User' }
  ]}
  columns={[
    { field: 'name', headerName: 'Name', flex: 1 },
    { field: 'email', headerName: 'Email', flex: 1 },
    { field: 'role', headerName: 'Role', flex: 0.5 }
  ]}
/>

// Advanced usage with custom rendering
<PayskyDataGrid 
  title="Advanced Table"
  rows={users}
  columns={[
    { 
      field: 'name', 
      headerName: 'Name', 
      flex: 1,
      renderCell: (params) => (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Avatar src={params.row.avatar} />
          <div style={{ marginLeft: 10 }}>
            <div>{params.row.name}</div>
            <div style={{ fontSize: '0.8rem', color: '#666' }}>{params.row.email}</div>
          </div>
        </div>
      )
    },
    { field: 'role', headerName: 'Role', flex: 0.5 },
    {
      field: 'status',
      headerName: 'Status',
      flex: 0.5,
      renderCell: (params) => (
        <PayskyChip 
          type="status"
          label={params.value}
          color={params.value === 'Active' ? 'success' : 'error'}
        />
      )
    },
    {
      field: 'actions',
      headerName: 'Actions',
      flex: 0.5,
      renderCell: (params) => (
        <PayskyButton 
          variant="text" 
          color="primary" 
          onClick={() => handleEdit(params.row.id)}
        >
          Edit
        </PayskyButton>
      )
    }
  ]}
  colors={{
    dark: '#1976d2',
    gray: '#64748B',
    beige: '#E2E8F0'
  }}
  initialPageSize={10}
  pageSizeOptions={[5, 10, 25, 50]}
  searchPlaceholder="Search users..."
  exportButtonLabel="Export Users"
  csvFileName="users-data"
/>

// Without card wrapper
<PayskyDataGrid 
  disableCard={true}
  rows={data}
  columns={columns}
  hideExport={true}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | undefined | Title for the data grid card | | action | React.ReactNode | undefined | Action component to display in the card header | | rows | Array | required | Data rows to display in the grid | | columns | PayskyDataGridColumn[] | required | Column definitions for the grid | | initialPage | number | 0 | Initial pagination page | | initialPageSize | number | 7 | Initial pagination page size | | pageSizeOptions | number[] | [7, 10, 25, 50] | Array of available page sizes | | colors | ThemeColors | defaultThemeColors | Custom colors for the data grid |

PayskyDataGridToolbar

A customizable toolbar for data grid with search and export functionality.

import { PayskyDataGridToolbar } from 'paysky-ui-library';

// This component is used internally by PayskyDataGrid
// You can use it directly with MUI's DataGrid by providing it as a slot
<DataGrid
  rows={rows}
  columns={columns}
  slots={{
    toolbar: PayskyDataGridToolbar
  }}
  slotProps={{
    toolbar: {
      value: searchTerm,
      clearSearch: () => setSearchTerm(''),
      onChange: (e) => setSearchTerm(e.target.value),
      exportButtonLabel: "Export Data",
      searchPlaceholder: "Search..."
    }
  }}
/>

PayskySelectableTable

A customizable table with row selection functionality.

import { PayskySelectableTable, defaultAvatarFormatter, defaultStatusFormatter } from 'paysky-ui-library';

// Basic usage
<PayskySelectableTable 
  title="Users Table"
  rows={[
    { id: 1, fullName: 'John Doe', email: '[email protected]', status: 1 },
    { id: 2, fullName: 'Jane Smith', email: '[email protected]', status: 2 },
    { id: 3, fullName: 'Bob Johnson', email: '[email protected]', status: 3 }
  ]}
  columns={[
    { id: 'fullName', label: 'Name', minWidth: 200 },
    { id: 'email', label: 'Email', minWidth: 200 },
    { id: 'status', label: 'Status', minWidth: 120, 
      format: (value) => defaultStatusFormatter(value, {
        1: { label: 'Active', color: 'success' },
        2: { label: 'Pending', color: 'warning' },
        3: { label: 'Inactive', color: 'error' }
      }) 
    }
  ]}
/>

// Advanced usage with custom rendering
<PayskySelectableTable 
  title="Users with Selectable Rows"
  rows={users}
  columns={[
    { 
      id: 'user', 
      label: 'User', 
      minWidth: 250,
      format: (_, row) => defaultAvatarFormatter(
        row,
        'avatar',
        'fullName',
        'post',
        '/images/avatars/'
      )
    },
    { id: 'email', label: 'Email', minWidth: 200 },
    { id: 'start_date', label: 'Start Date', minWidth: 120 },
    { id: 'experience', label: 'Experience', minWidth: 120 },
    { id: 'age', label: 'Age', minWidth: 80, align: 'right' },
    { 
      id: 'status', 
      label: 'Status', 
      minWidth: 120,
      format: (value) => defaultStatusFormatter(value, {
        1: { label: 'Active', color: 'success' },
        2: { label: 'Pending', color: 'warning' },
        3: { label: 'Completed', color: 'info' },
        4: { label: 'Rejected', color: 'error' },
        5: { label: 'Resigned', color: 'secondary' }
      })
    }
  ]}
  colors={{
    dark: '#1976d2',
    gray: '#64748B',
    beige: '#E2E8F0'
  }}
  maxHeight={600}
  stickyHeader={true}
  onSelectionChange={(selected) => console.log('Selected rows:', selected)}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Data Table with Selection' | Title for the table card | | action | React.ReactNode | undefined | Action component to display in the card header | | rows | PayskySelectableTableRow[] | [] | Data rows to display in the table | | columns | PayskySelectableTableColumn[] | [] | Column definitions for the table | | statusMapping | StatusMapping | {...} | Mapping for status values to display text and color | | colors | ThemeColors | defaultThemeColors | Custom colors for the table | | disableCard | boolean | false | Hide card container | | maxHeight | number | string | 600 | Max height for the table container | | stickyHeader | boolean | true | Make the table header sticky | | initialSelected | (number | string)[] | [] | Initial selected rows | | onSelectionChange | function | undefined | Callback when selection changes | | avatarField | string | 'avatar' | Key for the avatar field in rows | | nameField | string | 'fullName' | Key for the name field in rows | | subtitleField | string | 'post' | Key for the subtitle field in rows | | statusField | string | 'status' | Key for the status field in rows | | avatarBasePath | string | '/images/avatars/' | Base path for avatar images | | sx | object | {} | Custom styling for the table | | containerSx | object | {} | Custom styling for the table container |

Helper Functions

The component provides two helper functions to format avatar and status chips:

1. defaultAvatarFormatter: Creates a user card with avatar, name, and subtitle
2. defaultStatusFormatter: Creates a status chip with appropriate color

PayskyLineChart

A customizable line chart component built with ApexCharts.

import { PayskyLineChart } from 'paysky-ui-library';

// Basic usage
<PayskyLineChart 
  title="Transaction Volume"
  subheader="Payment gateway daily processing volume"
  series={[
    {
      data: [280, 200, 220, 180, 270, 250, 70, 90, 200]
    }
  ]}
  categories={['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12']}
/>

// With growth indicator and value
<PayskyLineChart 
  title="Transaction Volume"
  subheader="Payment gateway daily processing volume"
  series={[
    {
      data: [280, 200, 220, 180, 270, 250, 70, 90, 200]
    }
  ]}
  categories={['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12']}
  totalValue="$221,267"
  showGrowth={true}
  positiveGrowth={true}
  growthValue="22%"
/>

// Multiple series with custom colors
<PayskyLineChart 
  title="Monthly Performance"
  series={[
    {
      name: 'Sales',
      data: [280, 200, 220, 180, 270, 250, 70],
      color: '#ff9f43'
    },
    {
      name: 'Revenue',
      data: [200, 230, 190, 250, 220, 240, 280],
      color: '#28c76f'
    }
  ]}
  categories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']}
  height={350}
/>

// Custom options
<PayskyLineChart 
  title="Custom Chart"
  series={[
    {
      name: 'Visits',
      data: [100, 120, 90, 170, 130, 160, 140, 240, 220]
    }
  ]}
  categories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']}
  options={{
    stroke: { curve: 'smooth' },
    markers: { size: 6 },
    chart: {
      toolbar: { show: true }
    }
  }}
  colors={{
    primary: '#1976d2',
    success: '#28c76f',
    error: '#ea5455'
  }}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Line Chart' | Title for the chart card | | subheader | string | undefined | Subtitle for the chart card | | series | PayskyLineChartSeries[] | [] | Series data for the chart | | categories | string[] | [] | Categories for x-axis | | height | number | 400 | Height of the chart | | options | ApexOptions | {} | Custom options for the chart | | totalValue | string | number | undefined | Total value to display in the header | | growthValue | string | '0%' | Growth indicator value (e.g., "22%") | | showGrowth | boolean | false | Show growth chip in header | | positiveGrowth | boolean | true | Growth is positive or negative | | disableCard | boolean | false | Disable card wrapper | | colors | ThemeColors | defaultThemeColors | Custom colors | | sx | object | {} | Custom styling for the chart container |

PayskyAreaChart

A customizable area chart component built with ApexCharts, featuring a date range picker.

import { PayskyAreaChart } from 'paysky-ui-library';

// Basic usage
<PayskyAreaChart 
  title="Payment Processing Trends"
  subheader="Transaction volume by category"
  series={[
    {
      name: 'Transactions',
      data: [100, 120, 90, 170, 130, 160, 140, 240, 220, 180]
    }
  ]}
  categories={['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12', '16/12']}
/>

// Multiple series with custom colors
<PayskyAreaChart 
  title="Payment Processing Trends"
  subheader="Transaction volume by category"
  series={[
    {
      name: 'Transactions',
      data: [100, 120, 90, 170, 130, 160, 140, 240, 220, 180],
      color: '#ab7efd'
    },
    {
      name: 'Authorizations',
      data: [60, 80, 70, 110, 80, 100, 90, 180, 160, 140],
      color: '#b992fe'
    },
    {
      name: 'Settlements',
      data: [20, 40, 30, 70, 40, 60, 50, 140, 120, 100],
      color: '#e0cffe'
    }
  ]}
  categories={['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12', '16/12']}
/>

// With date range picker
<PayskyAreaChart 
  title="Payment Processing Trends"
  subheader="Transaction volume by category"
  series={[
    {
      name: 'Transactions',
      data: [100, 120, 90, 170, 130, 160, 140, 240, 220, 180]
    }
  ]}
  categories={['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12', '16/12']}
  enableDateRangePicker={true}
  onDateRangeChange={(start, end) => console.log(`Date range: ${start} to ${end}`)}
/>

// Custom options
<PayskyAreaChart 
  title="Custom Area Chart"
  series={[
    {
      name: 'Sales',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125, 150]
    }
  ]}
  categories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct']}
  options={{
    fill: {
      opacity: 0.8,
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: 'vertical',
        shadeIntensity: 0.5,
        inverseColors: false,
        opacityFrom: 1,
        opacityTo: 0.8,
      }
    }
  }}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Area Chart' | Title for the chart card | | subheader | string | undefined | Subtitle for the chart card | | series | PayskyAreaChartSeries[] | [] | Series data for the chart | | categories | string[] | [] | Categories for x-axis | | height | number | 400 | Height of the chart | | options | ApexOptions | {} | Custom options for the chart | | enableDateRangePicker | boolean | false | Enable date range picker | | onDateRangeChange | function | undefined | Callback when date range changes | | defaultStartDate | Date | null | null | Default start date for the date range picker | | defaultEndDate | Date | null | null | Default end date for the date range picker | | disableCard | boolean | false | Disable card wrapper | | colors | ThemeColors | defaultThemeColors | Custom colors | | sx | object | {} | Custom styling for the chart container |

PayskyDonutChart

A customizable donut chart component built with ApexCharts.

import { PayskyDonutChart } from 'paysky-ui-library';

// Basic usage
<PayskyDonutChart 
  title="Payment Method Distribution"
  subheader="Transaction volume by payment type"
  series={[45, 30, 15, 10]}
  labels={['Credit Cards', 'Digital Wallets', 'Bank Transfers', 'Crypto']}
/>

// Custom colors
<PayskyDonutChart 
  title="Payment Method Distribution"
  subheader="Transaction volume by payment type"
  series={[45, 30, 15, 10]}
  labels={['Credit Cards', 'Digital Wallets', 'Bank Transfers', 'Crypto']}
  sliceColors={['#fdd835', '#ffa1a1', '#826bf8', '#00d4bd']} 
/>

// Without percentage and total
<PayskyDonutChart 
  title="Revenue Breakdown"
  series={[5000, 3000, 2000, 1000]}
  labels={['Product A', 'Product B', 'Product C', 'Product D']}
  showPercentage={false}
  showTotal={false}
/>

// Custom total
<PayskyDonutChart 
  title="Task Status"
  series={[12, 8, 4]}
  labels={['Completed', 'In Progress', 'Pending']}
  totalLabel="Completion"
  totalFormatter={(series) => {
    const total = series.reduce((sum, val) => sum + val, 0);
    const completePercentage = Math.round((series[0] / total) * 100);
    return `${completePercentage}%`;
  }}
/>

// Custom options
<PayskyDonutChart 
  title="Customer Segments"
  series={[35, 25, 20, 15, 5]}
  labels={['Enterprise', 'SMB', 'Startup', 'Individual', 'Other']}
  options={{
    plotOptions: {
      pie: {
        startAngle: -90,
        endAngle: 90,
        offsetY: 10,
        donut: {
          size: '75%'
        }
      }
    },
    grid: {
      padding: {
        bottom: -80
      }
    }
  }}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Donut Chart' | Title for the chart card | | subheader | string | undefined | Subtitle for the chart card | | series | number[] | [] | Data values for the donut slices | | labels | string[] | ['Series 1', 'Series 2', ...] | Labels for each data slice | | height | number | 400 | Height of the chart | | sliceColors | string[] | [...] | Custom colors for each slice | | options | ApexOptions | {} | Custom options for the chart | | disableCard | boolean | false | Disable card wrapper | | showPercentage | boolean | true | Whether to show percentage in labels | | showTotal | boolean | true | Whether to show total in the center | | totalLabel | string | first label | Total label text | | totalFormatter | function | undefined | Custom total formatter | | colors | ThemeColors | defaultThemeColors | Custom colors | | sx | object | {} | Custom styling for the chart container |

PayskyColumnChart

A customizable column/bar chart component built with ApexCharts.

import { PayskyColumnChart } from 'paysky-ui-library';

// Basic usage
<PayskyColumnChart 
  title="Payment Methods Comparison"
  subheader="Volume by payment type"
  series={[
    {
      name: 'Credit Cards',
      data: [90, 120, 55, 100, 80, 125, 175, 70, 88]
    },
    {
      name: 'Digital Wallets',
      data: [85, 100, 30, 40, 95, 90, 30, 110, 62]
    }
  ]}
  categories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']}
/>

// Custom colors
<PayskyColumnChart 
  title="Sales Distribution"
  series={[
    {
      name: 'Store A',
      data: [44, 55, 57, 56, 61, 58]
    },
    {
      name: 'Store B',
      data: [76, 85, 101, 98, 87, 105]
    }
  ]}
  categories={['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6']}
  barColors={['#FF9F43', '#00CFE8']}
/>

// With date picker
<PayskyColumnChart 
  title="Monthly Performance"
  series={[
    {
      name: 'Revenue',
      data: [1244, 1355, 1557, 1756, 1461, 1358]
    },
    {
      name: 'Expenses',
      data: [976, 985, 1001, 1098, 987, 1105]
    }
  ]}
  enableDatePicker={true}
  onDateChange={(start, end) => console.log('Date range selected:', start, end)}
/>

// Non-stacked columns
<PayskyColumnChart 
  title="Products Comparison"
  series={[
    {
      name: 'Product A',
      data: [44, 55, 41, 67, 22, 43]
    },
    {
      name: 'Product B',
      data: [13, 23, 20, 8, 13, 27]
    }
  ]}
  stacked={false}
  columnWidth="30%"
/>

// With custom background
<PayskyColumnChart 
  title="Regional Sales"
  series={[
    {
      name: 'North',
      data: [42, 52, 16, 55, 59, 51]
    },
    {
      name: 'South',
      data: [25, 31, 33, 19, 22, 27]
    }
  ]}
  backgroundBarColors={['#F5F5F5', '#EFEFEF', '#E5E5E5', '#F5F5F5', '#EFEFEF']}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Column Chart' | Title for the chart card | | subheader | string | undefined | Subtitle for the chart card | | series | PayskyColumnChartSeries[] | [] | Data series for the chart | | categories | string[] | ['Jan', 'Feb', ...] | X-axis categories | | height | number | 400 | Height of the chart | | options | ApexOptions | {} | Custom options for the chart | | disableCard | boolean | false | Disable card wrapper | | enableDatePicker | boolean | false | Enable date range picker | | initialStartDate | Date or null | null | Initial start date | | initialEndDate | Date or null | null | Initial end date | | onDateChange | function | undefined | On date change callback | | stacked | boolean | true | Stacked columns | | columnWidth | string | '15%' | Column width in percentage | | backgroundBarColors | string[] | [...] | Background bar colors | | barColors | string[] | [...] | Bar colors (for each series) | | colors | ThemeColors | defaultThemeColors | Custom colors | | sx | object | {} | Custom styling for the chart container |

PayskyIconForm

A customizable form component with icon-adorned text fields.

import { PayskyIconForm } from 'paysky-ui-library';
import PersonIcon from '@mui/icons-material/Person';
import EmailIcon from '@mui/icons-material/Email';
import PhoneIcon from '@mui/icons-material/Phone';
import MessageIcon from '@mui/icons-material/Message';

// Basic usage
<PayskyIconForm 
  title="Payment Gateway Registration"
  fields={[
    {
      id: 'businessName',
      label: 'Business Name',
      placeholder: 'Acme Corporation',
      icon: <PersonIcon fontSize='small' />
    },
    {
      id: 'email',
      label: 'Business Email',
      placeholder: '[email protected]',
      type: 'email',
      helperText: 'We will send payment notifications to this email',
      icon: <EmailIcon fontSize='small' />
    },
    {
      id: 'phone',
      label: 'Contact Number',
      placeholder: '123-456-7890',
      type: 'tel',
      icon: <PhoneIcon fontSize='small' />
    },
    {
      id: 'description',
      label: 'Business Description',
      placeholder: 'Tell us about your business and payment needs...',
      multiline: true,
      minRows: 3,
      icon: <MessageIcon fontSize='small' />
    }
  ]}
  submitText="Register"
  onSubmit={(values) => console.log('Form values:', values)}
/>

// Custom layout with columns
<PayskyIconForm 
  title="Contact Information"
  subtitle="Please provide your contact details"
  fields={[
    {
      id: 'firstName',
      label: 'First Name',
      placeholder: 'John',
      required: true,
      icon: <PersonIcon fontSize='small' />
    },
    {
      id: 'lastName',
      label: 'Last Name',
      placeholder: 'Doe',
      required: true,
      icon: <PersonIcon fontSize='small' />
    },
    {
      id: 'email',
      label: 'Email',
      type: 'email',
      required: true,
      icon: <EmailIcon fontSize='small' />
    },
    {
      id: 'phone',
      label: 'Phone',
      type: 'tel',
      icon: <PhoneIcon fontSize='small' />
    }
  ]}
  spacing={3}
  xsColumns={12}
  smColumns={6}
  submitText="Save"
/>

// Without card wrapper
<PayskyIconForm 
  fields={[
    {
      id: 'message',
      label: 'Quick Message',
      placeholder: 'Type your message here...',
      multiline: true,
      icon: <MessageIcon fontSize='small' />
    }
  ]}
  disableCard={true}
  submitText="Send"
/>

// With additional buttons
<PayskyIconForm 
  title="Update Profile"
  fields={[
    {
      id: 'name',
      label: 'Name',
      icon: <PersonIcon fontSize='small' />
    }
  ]}
  submitText="Save"
  additionalButtons={
    <Button variant="outlined" color="secondary">
      Cancel
    </Button>
  }
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Form' | Title of the form card | | subtitle | string | undefined | Subtitle of the form card | | fields | PayskyIconFormField[] | [] | Array of field configurations | | submitText | string | 'Submit' | Text for the submit button | | onSubmit | function | undefined | Handler for form submission | | initialValues | object | {} | Initial values for the form fields | | spacing | number | 5 | Spacing between fields | | xsColumns | number | 12 | Column configuration for xs screens | | smColumns | number | undefined | Column configuration for sm screens | | mdColumns | number | undefined | Column configuration for md screens | | cardProps | object | {} | Additional props for the Card component | | cardContentProps | object | {} | Additional props for the CardContent component | | submitButtonProps | object | {} | Additional props for the Button component | | colors | ThemeColors | defaultThemeColors | Custom colors | | disableCard | boolean | false | Disable card wrapper | | formProps | object | {} | Additional props for the form element | | additionalButtons | ReactNode | undefined | Additional buttons to show next to submit button |

PayskyIconFormField Props

| Name | Type | Default | Description | |------|------|---------|-------------| | id | string | - | Unique id for the field | | label | string | - | Label text | | placeholder | string | undefined | Placeholder text | | type | string | 'text' | Field type (text, email, number, etc) | | helperText | string | undefined | Helper text to show below the field | | multiline | boolean | false | Whether the field is multiline | | minRows | number | 3 | Minimum rows for multiline fields | | icon | ReactNode | undefined | Icon component to show at the start of the field | | required | boolean | false | Whether the field is required | | validate | function | undefined | Custom validation function | | textFieldProps | object | {} | Additional props to pass to the TextField |

PayskyTextField

A customizable text field component with enhanced styling options and icon support.

import { PayskyTextField } from 'paysky-ui-library';
import PersonIcon from '@mui/icons-material/Person';
import VisibilityIcon from '@mui/icons-material/Visibility';

// Basic text field with default colors
<PayskyTextField 
  label="Username" 
  placeholder="Enter your username"
/>

// Using direct string color
<PayskyTextField 
  label="Email" 
  colors="#8E24AA"  // Custom purple color
/>

// Password field with visibility toggle
<PayskyTextField 
  type="password"
  label="Password"
  showPasswordToggle={true}
/>

// Select field
<PayskyTextField 
  type="select"
  label="Country"
  select={true}
  selectItems={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' }
  ]}
/>

PayskyDatePicker

A customizable date picker component that wraps react-datepicker.

import { PayskyDatePicker } from 'paysky-ui-library';

// Basic usage with default colors
<PayskyDatePicker
  label="Registration Date"
  selected={date}
  onChange={setDate}
/>

// Using direct string color
<PayskyDatePicker 
  label="Event Date" 
  colors="#2196F3"  // Custom blue color
  selected={date}
  onChange={setDate}
/>

// With year and month dropdowns
<PayskyDatePicker
  label="Select Date"
  selected={date}
  onChange={setDate}
  showYearDropdown
  showMonthDropdown
  placeholder="MM-DD-YYYY"
/>

// With min and max dates
<PayskyDatePicker
  label="Appointment Date"
  selected={date}
  onChange={setDate}
  minDate={new Date()}
  maxDate={new Date(new Date().setMonth(new Date().getMonth() + 3))}
/>

// Custom date format
<PayskyDatePicker
  label="Date of Birth"
  selected={date}
  onChange={setDate}
  dateFormat="yyyy-MM-dd"
/>

// With error state
<PayskyDatePicker
  label="Required Date"
  selected={date}
  onChange={setDate}
  error
  helperText="Please select a valid date"
  required
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | selected | Date | null | Selected date | | onChange | function | undefined | Change handler | | label | string | 'Date' | Label for the date picker | | placeholder | string | 'MM-DD-YYYY' | Placeholder text | | showYearDropdown | boolean | true | Whether to show year dropdown | | showMonthDropdown | boolean | true | Whether to show month dropdown | | dateFormat | string | 'MM/dd/yyyy' | Date format | | required | boolean | false | Whether the field is required | | helperText | ReactNode | undefined | Helper text | | error | boolean | false | Error state | | id | string | undefined | Input ID | | sx | object | {} | Custom styling | | disabled | boolean | false | Disabled state | | autoComplete | string | 'off' | Auto complete | | minDate | Date | undefined | Minimum date | | maxDate | Date | undefined | Maximum date | | colors | ThemeColors | defaultThemeColors | Custom colors | | datePickerProps | object | {} | Additional props for DatePicker | | textFieldProps | object | {} | Additional props for TextField |

PayskyDivider

A customizable divider component with optional text.

import { PayskyDivider } from 'paysky-ui-library';

// Simple divider
<PayskyDivider />

// Divider with margins
<PayskyDivider marginTop={2} marginBottom={2} />

// Divider with text
<PayskyDivider text="Section Title" />

// Divider with aligned text
<PayskyDivider text="Left Aligned" textAlign="left" />
<PayskyDivider text="Right Aligned" textAlign="right" />

// Using direct string color
<PayskyDivider 
  text="New Section" 
  colors="#4CAF50"  // Custom green color
/>

// Styled divider
<PayskyDivider 
  text="Custom Style" 
  textVariant="h6" 
  textColor="primary.main"
  textStyle={{ fontWeight: 800 }}
/>

// Divider with custom content
<PayskyDivider>
  <Button size="small" variant="contained">Action</Button>
</PayskyDivider>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | text | ReactNode | undefined | Text content | | textAlign | string | 'center' | Text alignment | | marginTop | number/string | 0 | Top margin | | marginBottom | number/string | 0 | Bottom margin | | colors | ThemeColors | defaultThemeColors | Custom colors | | textVariant | string | 'body2' | Typography variant | | textColor | string | undefined | Typography color | | textStyle | object | {} | Typography style | | sx | object | {} | Custom styling | | children | ReactNode | undefined | Divider content |

PayskyFormLayout

A comprehensive form layout component with sections, multiple field types, and built-in form handling.

import { PayskyFormLayout } from 'paysky-ui-library';

// Basic usage with inline fields
const basicFields = [
  {
    id: 'firstName',
    label: 'First Name',
    type: 'text',
    required: true,
    gridSize: 6
  },
  {
    id: 'lastName',
    label: 'Last Name',
    type: 'text',
    gridSize: 6
  },
  {
    id: 'email',
    label: 'Email',
    type: 'email',
    required: true,
    gridSize: 12
  }
];

<PayskyFormLayout
  title="Contact Information"
  subtitle="Please fill in your details"
  fields={basicFields}
  onSubmit={handleSubmit}
/>

// Advanced usage with sections
const formSections = [
  {
    title: 'Personal Information',
    fields: [
      {
        id: 'firstName',
        label: 'First Name',
        type: 'text',
        required: true,
        gridSize: 6
      },
      {
        id: 'lastName',
        label: 'Last Name',
        type: 'text',
        gridSize: 6
      },
      {
        id: 'birthDate',
        label: 'Date of Birth',
        type: 'date',
        gridSize: 6
      },
      {
        id: 'gender',
        label: 'Gender',
        type: 'select',
        menuItems: [
          { value: 'male', label: 'Male' },
          { value: 'female', label: 'Female' },
          { value: 'other', label: 'Other' }
        ],
        gridSize: 6
      }
    ]
  },
  {
    title: 'Account Security',
    fields: [
      {
        id: 'email',
        label: 'Email',
        type: 'email',
        required: true,
        gridSize: 12
      },
      {
        id: 'divider1',
        type: 'divider',
        dividerText: 'Password',
        dividerTextAlign: 'left'
      },
      {
        id: 'password',
        label: 'Password',
        type: 'password',
        required: true,
        showPasswordToggle: true,
        gridSize: 6
      },
      {
        id: 'confirmPassword',
        label: 'Confirm Password',
        type: 'password',
        required: true,
        showPasswordToggle: true,
        gridSize: 6
      }
    ]
  }
];

<PayskyFormLayout
  title="User Registration"
  subtitle="Create your account"
  sections={formSections}
  onSubmit={handleSubmit}
  onReset={handleReset}
  values={formValues}
  errors={formErrors}
  onChange={handleFieldChange}
  submitting={isSubmitting}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | undefined | Form title | | subtitle | string | undefined | Form subtitle | | sections | PayskyFormSection[] | [] | Form sections with fields | | fields | PayskyFormField[] | [] | Form fields (if not using sections) | | submitText | string | 'Submit' | Submit button text | | resetText | string | 'Reset' | Reset button text | | hideSubmit | boolean | false | Hide submit button | | hideReset | boolean | false | Hide reset button | | submitting | boolean | false | Form submitting state | | values | object | {} | Form values for controlled form | | errors | object | {} | Form errors for validation | | colors | ThemeColors | defaultThemeColors | Custom colors | | onSubmit | function | undefined | Submit handler | | onReset | function | undefined | Reset handler | | onChange | function | undefined | Field change handler | | hideCard | boolean | false | Hide card container | | formProps | object | {} | Additional form props | | sx | object | {} | Custom styling |

PayskyFormField Props

| Name | Type | Default | Description | |------|------|---------|-------------| | id | string | required | Unique field identifier | | label | string | required | Field label | | type | string | required | Field type: 'text', 'password', 'email', 'number', 'tel', 'select', 'date', 'divider' | | gridSize | number | varies by type | Grid size (1-12) | | placeholder | string | undefined | Placeholder text | | helperText | string | undefined | Helper text | | required | boolean | false | Required field | | error | boolean | false | Error state | | disabled | boolean | false | Disabled state | | menuItems | array | [] | Menu items for select type | | multiple | boolean | false | Multiple selection for select type | | showPasswordToggle | boolean | false | Toggle for password visibility | | autoComplete | string | undefined | Autocomplete attribute | | value | any | undefined | Field value | | defaultValue | any | undefined | Default value | | dateFormat | string | 'MM/dd/yyyy' | Date format for date type | | minDate | Date | undefined | Minimum date for date type | | maxDate | Date | undefined | Maximum date for date type | | showYearDropdown | boolean | true | Show year dropdown for date type | | showMonthDropdown | boolean | true | Show month dropdown for date type | | dividerText | string | undefined | Text for divider type | | dividerTextAlign | string | 'center' | Text alignment for divider type |

Chart Components

PaySky UI Library provides a set of powerful chart components built on top of ApexCharts. All chart components support both ThemeColors objects and direct string color values for flexible styling.

PayskyLineChart

A customizable line chart component with optional value display.

// Basic usage with default colors
<PayskyLineChart
  title="Monthly Visits"
  series={[
    { name: "Visitors", data: [10, 41, 35, 51, 49, 62, 69, 91, 148] }
  ]}
  categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]}
/>

// Using a string color directly
<PayskyLineChart
  title="Monthly Visits"
  series={[
    { name: "Visitors", data: [10, 41, 35, 51, 49, 62, 69, 91, 148] }
  ]}
  categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]}
  colors="#FF5722"  // Direct color string (any CSS color format)
/>

// Using ThemeColors object
<PayskyLineChart
  title="Monthly Visits"
  series={[
    { name: "Visitors", data: [10, 41, 35, 51, 49, 62, 69, 91, 148] }
  ]}
  categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]}
  colors={{
    primary: '#2196F3',
    secondary: '#9C27B0'
  }}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Line Chart' | Chart title | | subheader | string | undefined | Chart subtitle | | series | { name: string, data: number[] }[] | [] | Data series | | categories | string[] | [] | X-axis categories | | height | number | 400 | Chart height | | options | ApexOptions | {} | Custom chart options | | showTotal | boolean | false | Show total value | | totalValue | number | undefined | Custom total value | | growthValue | number | undefined | Growth indicator value | | growthLabel | string | 'vs. prev. period' | Growth label text | | disableCard | boolean | false | Disable card wrapper | | colors | ThemeColors | string | defaultThemeColors | Custom colors - accepts ThemeColors object or any CSS color string | | sx | object | {} | Custom styling |

PayskyAreaChart

A customizable area chart component with optional date range picker.

// Basic usage with default colors
<PayskyAreaChart
  title="Sales Statistics"
  series={[
    { name: "Product A", data: [44, 55, 41, 67, 22, 43, 65] },
    { name: "Product B", data: [13, 23, 20, 8, 13, 27, 33] }
  ]}
  categories={["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]}
/>

// Using a string color directly (creates automatic color gradient for multiple series)
<PayskyAreaChart
  title="Sales Statistics"
  series={[
    { name: "Product A", data: [44, 55, 41, 67, 22, 43, 65] },
    { name: "Product B", data: [13, 23, 20, 8, 13, 27, 33] }
  ]}
  categories={["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]}
  colors="#2196F3"  // Base color for gradient
/>

// Specifying colors per series
<PayskyAreaChart
  title="Sales Statistics"
  series={[
    { name: "Product A", data: [44, 55, 41, 67, 22, 43, 65], color: "#FF5722" },
    { name: "Product B", data: [13, 23, 20, 8, 13, 27, 33], color: "#4CAF50" }
  ]}
  categories={["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]}
/>

// With date range picker
<PayskyAreaChart
  title="Sales Statistics"
  series={[
    { name: "Product A", data: [44, 55, 41, 67, 22, 43, 65] },
    { name: "Product B", data: [13, 23, 20, 8, 13, 27, 33] }
  ]}
  categories={["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]}
  enableDateRangePicker={true}
  onDateRangeChange={(start, end) => console.log(start, end)}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Area Chart' | Chart title | | subheader | string | undefined | Chart subtitle | | series | { name: string, data: number[], color?: string }[] | [] | Data series | | categories | string[] | [] | X-axis categories | | height | number | 400 | Chart height | | options | ApexOptions | {} | Custom chart options | | enableDateRangePicker | boolean | false | Enable date range picker | | onDateRangeChange | function | undefined | Date range change handler | | defaultStartDate | Date | null | Default start date | | defaultEndDate | Date | null | Default end date | | disableCard | boolean | false | Disable card wrapper | | colors | ThemeColors | string | defaultThemeColors | Custom colors - accepts ThemeColors object or any CSS color string | | sx | object | {} | Custom styling |

PayskyColumnChart

A customizable column chart component with optional date range picker.

// Basic usage with default colors
<PayskyColumnChart
  title="Monthly Revenue"
  series={[
    { name: "Revenue", data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }
  ]}
  categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]}
/>

// Using a string color directly
<PayskyColumnChart
  title="Monthly Revenue"
  series={[
    { name: "Revenue", data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }
  ]}
  categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]}
  colors="#9C27B0"  // Any CSS color format
/>

// Stacked columns with multiple series
<PayskyColumnChart
  title="Stacked Revenue"
  series={[
    { name: "Product A", data: [44, 55, 41, 67, 22, 43] },
    { name: "Product B", data: [13, 23, 20, 8, 13, 27] },
    { name: "Product C", data: [11, 17, 15, 15, 21, 14] }
  ]}
  categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
  stacked={true}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Column Chart' | Chart title | | subheader | string | undefined | Chart subtitle | | series | { name: string, data: number[] }[] | [] | Data series | | categories | string[] | [] | X-axis categories | | height | number | 400 | Chart height | | options | ApexOptions | {} | Custom chart options | | stacked | boolean | false | Enable stacked columns | | enableDateRangePicker | boolean | false | Enable date range picker | | onDateRangeChange | function | undefined | Date range change handler | | defaultStartDate | Date | null | Default start date | | defaultEndDate | Date | null | Default end date | | disableCard | boolean | false | Disable card wrapper | | colors | ThemeColors | string | defaultThemeColors | Custom colors - accepts ThemeColors object or any CSS color string | | sx | object | {} | Custom styling |

PayskyDonutChart

A customizable donut/pie chart component with percentage and value display.

// Basic usage with default colors
<PayskyDonutChart
  title="Sales Distribution"
  series={[44, 55, 41, 17, 15]}
  labels={["Product A", "Product B", "Product C", "Product D", "Product E"]}
/>

// Using a string color directly (creates automatic gradient)
<PayskyDonutChart
  title="Sales Distribution"
  series={[44, 55, 41, 17, 15]}
  labels={["Product A", "Product B", "Product C", "Product D", "Product E"]}
  colors="#E91E63"  // Base color for gradient
/>

// Specifying custom slice colors
<PayskyDonutChart
  title="Sales Distribution"
  series={[44, 55, 41, 17, 15]}
  labels={["Product A", "Product B", "Product C", "Product D", "Product E"]}
  sliceColors={["#FF5722", "#2196F3", "#4CAF50", "#FFC107", "#9C27B0"]}
/>

// Disabling percentage display
<PayskyDonutChart
  title="Sales Distribution"
  series={[44, 55, 41, 17, 15]}
  labels={["Product A", "Product B", "Product C", "Product D", "Product E"]}
  showPercentage={false}
/>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | 'Donut Chart' | Chart title | | subheader | string | undefined | Chart subtitle | | series | number[] | [] | Data values | | labels | string[] | [] | Data labels | | height | number | 400 | Chart height | | sliceColors | string[] | undefined | Custom colors for slices | | options | ApexOptions | {} | Custom chart options | | disableCard | boolean | false | Disable card wrapper | | showPercentage | boolean | true | Show percentage in labels | | showTotal | boolean | true | Show total in center | | totalLabel | string | undefined | Custom total label | | totalFormatter | function | undefined | Custom total formatter | | colors | ThemeColors | string | defaultThemeColors | Custom colors - accepts ThemeColors object or any CSS color string | | sx | object | {} | Custom styling |

Variants As One Component (For presentation)

PayskyButtons

A component to display various types of buttons in grouped sections.

<PayskyButtons 
  colors={{...}}
  showContained={true}
  showOutlined={true}
  showText={true}
  sectionLabels={{
    contained: "Primary Buttons",
    outlined: "Secondary Buttons",
    text: "Tertiary Buttons"
  }}
  buttonLabels={{
    dark: "Black",
    gray: "Gray",
    beige: "Sand"
  }}
  onButtonClick={(variant, color) => console.log(`Clicked ${variant} ${color} button`)}
/>

PayskyAlerts

A component to display various types of alerts in grouped sections.

<PayskyAlerts 
  spacing={2}
  showError={true}
  showWarning={true}
  showInfo={true}
  showSuccess={true}
  errorMessage="Custom error message"
  warningMessage="Custom warning message"
  infoMessage="Custom info message"
  successMessage="Custom success message"
/>

PayskyChips

A component to display various types of chips in grouped sections.

<PayskyChips 
  colors={{
    dark: '#000000',
    gray: '#777777',
    beige: '#D8C9A7',
    active: '#34C759',
    pending: '#FFC400',
    error: '#FF0000'
  }}
  showBasic={true}
  showOutlined={true}
  showWithIcon={true}
  showDeletable={true}
  showAvatar={true}
  showStatus={true}
  chipLabels={{
    dark: "Black",
    gray: "Gray",
    beige: "Sand",
    active: "Active",
    pending: "Pending",
    error: "Error"
  }}
  sectionSpacing={3}
  onChipClick={(type, color) => console.log(`Clicked ${type} ${color} chip`)}
  onChipDelete={(color) => console.log(`Deleted ${color} chip`)}
/>

PayskyMenus

A component to display various types of menus in grouped sections.

<PayskyMenus 
  colors={{
    dark: '#000000',
    gray: '#777777',
    beige: '#D8C9A7'
  }}
  showBasic={true}
  showWithIcons={true}
  showProfile={true}
  showDropdown={true}
  buttonLabels={{
    basic: "Open Menu",
    withIcons: "Open Icon Menu",
    dropdown: "Options"
  }}
  basicMenuItems={["Home", "Settings", "Sign Out"]}
  profileMenuItems={{
    name: "User Name",
    email: "[email protected]",
    profile: "View Profile",
    settings: "Preferences",
    logout: "Sign Out"
  }}
  onMenuItemClick={(section, item) => console.log(`Clicked ${item} in ${section} menu`)}
/>

License

MIT