@asafarim/shared

![npm version](https://www.npmjs.com/package/@asafarim/shared)
![GitHub stars](https://github.com/AliSafari-IT/shared)
![MIT License](LICENSE)

> A modern collection of reusable React components and utilities for ASafariM web applications with full theme system integration.

---

🚀 Quick Install

sh

Install the component library

pnpm add @asafarim/shared



Install with theme system (recommended)

pnpm add @asafarim/shared @asafarim/react-themes



or with npm

npm install @asafarim/shared @asafarim/react-themes





🎨 Import Styles



Important: Components require CSS imports to display correctly.

tsx

// Import styles in your main entry file

import '@asafarim/shared/dist/styles.css';



// Then use components

import { ButtonComponent, SearchItems, DDItems, InputFields } from '@asafarim/shared';





📖 For detailed styling instructions, see STYLING.md



---



💻 Code Usage Examples



$3

tsx

import React from 'react';

import { ThemeProvider } from '@asafarim/react-themes';

import { 

  ButtonComponent, 

  SearchItems, 

  DDItems, 

  InputFields,

  HeaderComponent,

  DefaultPageHeader,

  HeroPageHeader,

  CallToActionPageHeader,

  FancyPageHeader

} from '@asafarim/shared';

import '@asafarim/react-themes/styles.css';

import '@asafarim/shared/dist/styles.css';



function App() {

  return (

    

      

        {/ Your components here /}

      

    

  );

}

$3

tsx

import React, { useState } from 'react';

import { ThemeProvider } from '@asafarim/react-themes';

import { 

  ButtonComponent, 

  SearchItems, 

  DDItems, 

  InputFields,

  HeaderComponent,

  DefaultPageHeader,

  HeroPageHeader,

  CallToActionPageHeader,

  FancyPageHeader,

  PackageLinks

} from '@asafarim/shared';

import '@asafarim/react-themes/styles.css';

import '@asafarim/shared/dist/styles.css';



function App() {

  const [searchTerm, setSearchTerm] = useState('');

  const [selectedFramework, setSelectedFramework] = useState('');

  const [formData, setFormData] = useState({

    name: '',

    email: '',

    message: ''

  });



  const frameworkOptions = [

    { value: 'react', label: 'React' },

    { value: 'vue', label: 'Vue.js' },

    { value: 'angular', label: 'Angular' },

    { value: 'svelte', label: 'Svelte' }

  ];



  return (

    

      

        {/ Header Components /}

                  title="My Application"

          subtitle="Welcome to our platform"

          logoText="MA"

          leftContent={

            

              Dashboard

              Analytics

            

          }

          rightContent={

            Profile

          }

        />



        {/ Hero Header for Landing Page /}

                  title="Welcome to Our Platform"

          subtitle="The ultimate solution for your business needs"

          backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"

          cta={

            

              Get Started

              

                Learn More

              

            

          }

        />



        {/ Main Content /}

        

          {/ Search and Filter Section /}

          

                          searchTerm={searchTerm}

              onSearchChange={setSearchTerm}

              placeholder="Search components..."

              searchType="default"

            />

            

                          selectedValue={selectedFramework}

              onValueChange={setSelectedFramework}

              items={frameworkOptions}

              dropdownType="outlined"

              placeholder="Select framework..."

            />

          



          {/ Form Section /}

          

            Contact Form

                          type="text"

              styling="default"

              label="Full Name"

              placeholder="Enter your name"

              value={formData.name}

              onChange={(value) => setFormData(prev => ({ ...prev, name: value }))}

              required

            />



                          styling="outlined"

              label="Email Address"

              placeholder="user@example.com"

              value={formData.email}

              onChange={(value) => setFormData(prev => ({ ...prev, email: value }))}

              validation={{ required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ }}

              validateOnChange

              helperText="Enter a valid email address"

            />



                          styling="minimal"

              label="Message"

              placeholder="Share your thoughts..."

              value={formData.message}

              onChange={(value) => setFormData(prev => ({ ...prev, message: value }))}

              rows={4}

              validation={{ maxLength: 500 }}

              showCharacterCount

              helperText="Maximum 500 characters"

            />

          



          {/ Action Buttons /}

          

            

              Submit Form

            

            

            

              Save Draft

            

            

            

              Cancel

            

          



          {/ Package Links /}

                      packageName="@asafarim/shared"

            githubPath="packages/shared"

            demoPath="packages/shared"

          />

        



        {/ Call to Action Header /}

                  title="Ready to Get Started?"

          subtitle="Join thousands of developers using our platform"

          ctaButton={

            

              Start Free Trial

            

          }

        />



        {/ Fancy Header for Premium Section /}

                  title="Enterprise Solutions"

          subtitle="Built for scale, designed for success"

          gradient="linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)"

          leftContent={

            

              Solutions

              Industries

            

          }

          rightContent={

            

              Contact Sales

            

          }

        />

      

    

  );

}



export default App;





$3



#### Header Components

tsx

// Base Header Component (Highly Customizable)

  type="default"

  title="My Application"

  subtitle="Welcome to our platform"

  logoText="MA"

  size="md"

  align="space-between"

  elevation="medium"

  showBorder

  showShadow

  leftContent={Dashboard}

  rightContent={Profile}

/>



// Pre-configured Header Variants

  title="Dashboard"

  subtitle="Welcome back, User"

  logoText="D"

  leftContent={/ navigation items /}

  rightContent={/ user actions /}

/>



  title="Welcome to Our Platform"

  subtitle="The ultimate solution for your business needs"

  backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"

  cta={/ call-to-action buttons /}

/>



  title="Premium Features"

  subtitle="Unlock the full potential of our platform"

  ctaButton={Upgrade Now}

/>



  title="Enterprise Solutions"

  subtitle="Built for scale, designed for success"

  gradient="linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)"

/>





#### Form Components

tsx

// Search Component

  searchTerm={searchTerm}

  onSearchChange={setSearchTerm}

  placeholder="Search components..."

  searchType="default"

/>



// Dropdown Component

  selectedValue={selectedValue}

  onValueChange={setSelectedValue}

  items={[

    { value: 'react', label: 'React' },

    { value: 'vue', label: 'Vue.js' },

    { value: 'angular', label: 'Angular' }

  ]}

  dropdownType="outlined"

  placeholder="Select framework..."

/>



// Input Fields

  type="text"

  styling="default"

  label="Full Name"

  placeholder="Enter your name"

  value={name}

  onChange={setName}

  required

/>



  styling="outlined"

  label="Email Address"

  placeholder="user@example.com"

  value={email}

  onChange={setEmail}

  validation={{ required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ }}

  validateOnChange

/>





#### Button Component

tsx

// Different Variants

Primary Button

Secondary Button

Success Button

Disabled Button

Loading Button



// With Icons

  variant="primary" 

  leftIcon={📧}

  rightIcon={→}

>

  Send Email





---



🌐 Live Demo & Documentation



- Live Demo: alisafari-it.github.io/shared

- Source: github.com/AliSafari-IT/shared



Explore all components with interactive examples, theme switching, and comprehensive prop documentation.



---



🧩 Components



This library currently includes five main components, each with multiple variants and comprehensive theme integration:



| Component | Description | Styles | Status |

|-----------|-------------|---------|--------|

| PackageLinks | Display links to npm, GitHub, and demos | Theme-aware styling | ✅ Ready |

| ButtonComponent | Versatile button with 9 variants, 5 sizes | Primary, Secondary, Success, Danger, Warning, Info, Outline, Ghost, Link | ✅ Ready |

| SearchItems | Flexible search input with clear functionality | Default, Compact, Outlined, Minimal | ✅ Ready |

| DDItems | Dropdown/select with customizable options | Default, Compact, Outlined, Minimal | ✅ Ready |

| InputFields | Comprehensive form input with 10+ input types | Default, Compact, Outlined, Minimal | ✅ Ready |

| HeaderComponent | Highly customizable header component | Default, Compact, Outlined, Minimal | ✅ Ready |

| Header Wrappers | Pre-configured header variants | DefaultPageHeader, HeroPageHeader, CallToActionPageHeader, FancyPageHeader | ✅ Ready |



$3

A flexible, theme-aware component for displaying links to npm packages, GitHub repositories, and live demos.



#### Usage

tsx

import React from 'react';

import { ThemeProvider } from '@asafarim/react-themes';

import { PackageLinks } from '@asafarim/shared';

import '@asafarim/react-themes/styles.css';



function App() {

  return (

    

              packageName="@asafarim/display-code"

        githubPath="packages/display-code"

        demoPath="packages/display-code"

      />

    

  );

}





#### Props

| Prop         | Type   | Required | Description                                                        |

|--------------|--------|----------|--------------------------------------------------------------------|

| packageName  | string | Yes      | The npm package name (e.g.,

@asafarim/display-code

)              |

| githubPath   | string | Yes      | Path to the package in the GitHub repo (e.g.,

packages/display-code

) |

| demoPath     | string | No       | Path to the demo in GitHub Pages (e.g.,

packages/display-code

)   |



$3

A versatile, professional button component with multiple variants, sizes, and states. Features modern glass morphism effects and full accessibility support.



#### Usage

tsx

import { ButtonComponent } from '@asafarim/shared';



function App() {

  return (

    

      

        Primary Button

      

      

      

        Loading Button

      

      

      

        Disabled Button

      

    

  );

}





#### Props

| Prop         | Type                                    | Default     | Description                                    |

|--------------|-----------------------------------------|-------------|------------------------------------------------|

| variant      |

 | Button visual style variant |

| size         |

'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md'

      | Button size                                    |

| loading      |

boolean | false

     | Shows loading spinner                          |

| disabled     |

boolean | false

     | Disables the button                            |

| fullWidth    |

boolean | false

     | Makes button full width                        |

| leftIcon     |

ReactNode

                             | -           | Icon displayed on the left                     |

| rightIcon    |

ReactNode

                             | -           | Icon displayed on the right                    |

| onClick      |

(event: MouseEvent) => void

           | -           | Click handler                                  |

| type         |

'button' \| 'submit' \| 'reset' | 'button'

  | Button HTML type                               |

| className    |

string

                                | -           | Additional CSS classes                         |

| children     |

ReactNode

                             | -           | Button content                                 |



$3

A flexible search input component with multiple visual styles and built-in clear functionality. Perfect for filtering, searching, and form inputs.



#### Usage

tsx

import { SearchItems } from '@asafarim/shared';



function App() {

  const [searchTerm, setSearchTerm] = useState('');

  

  return (

    

              searchTerm={searchTerm}

        onSearchChange={setSearchTerm}

        placeholder="Search components..."

        searchType="default"

      />

      

              searchTerm={searchTerm}

        onSearchChange={setSearchTerm}

        placeholder="Filter results..."

        searchType="outlined"

      />

    

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| searchTerm     |

string

                                | -                   | Current search value (controlled)              |

| onSearchChange |

(value: string) => void

               | -                   | Callback when search value changes             |

| placeholder    |

string | "Search projects..."

 | Placeholder text for the input              |

| className      |

string | "search-input"

    | CSS class name for the input element          |

| searchType     |

'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default'

 | Visual style variant |



$3

A dropdown/select component with customizable options and multiple visual styles. Ideal for forms, filters, and selection controls.



#### Usage

tsx

import { DDItems } from '@asafarim/shared';



function App() {

  const [selectedValue, setSelectedValue] = useState('');

  

  const options = [

    { value: 'react', label: 'React' },

    { value: 'vue', label: 'Vue.js' },

    { value: 'angular', label: 'Angular' },

  ];

  

  return (

    

              selectedValue={selectedValue}

        onValueChange={setSelectedValue}

        items={options}

        dropdownType="default"

        placeholder="Select framework..."

      />

      

              selectedValue={selectedValue}

        onValueChange={setSelectedValue}

        items={options}

        dropdownType="outlined"

        placeholder="Choose option..."

      />

    

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| selectedValue  |

string

                                | -                   | Currently selected value (controlled)          |

| onValueChange  |

(value: string) => void

               | -                   | Callback when selection changes                |

| items          |

DropdownItem[]

                        | -                   | Array of options with value and label         |

| dropdownType   |

'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default'

 | Visual style variant |

| className      |

string | "filter-select"

   | CSS class name for the select element         |

| placeholder    |

string | "Select an option"

 | Placeholder text when no option selected     |



#### DropdownItem Interface

tsx

interface DropdownItem {

  value: string;

  label: string;

}





$3

A comprehensive form input component supporting 10+ input types with validation, states, and accessibility features. Perfect for building robust forms with consistent styling.



#### Usage

Demonstrating both the generic

InputFields

 API and static subcomponents:

tsx

import React, { useState } from 'react';

import { InputFields } from '@asafarim/shared';



function App() {

  const [name, setName] = useState('');

  const [email, setEmail] = useState('');

  const [comments, setComments] = useState('');

  const [volume, setVolume] = useState('50');



  return (

    

      {/ Generic API /}

              type="text"

        styling="default"

        label="Full Name"

        placeholder="Enter your name"

        value={name}

        onChange={setName}

        required

      />



      {/ Static subcomponents /}

              styling="outlined"

        label="Email Address"

        placeholder="user@example.com"

        value={email}

        onChange={setEmail}

        validation={{ required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ }}

        validateOnChange

        icon="📧"

        iconPosition="left"

        helperText="Enter a valid email address"

      />



              styling="minimal"

        label="Comments"

        placeholder="Share your thoughts..."

        value={comments}

        onChange={setComments}

        rows={4}

        validation={{ maxLength: 500 }}

        showCharacterCount

        helperText="Maximum 500 characters"

      />



              styling="default"

        label="Volume"

        min={0}

        max={100}

        step={1}

        value={volume}

        onChange={setVolume}

      />

    

  );

}

   



#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| type           |

InputFieldType | 'text'

           | Input type (text, email, password, number, tel, url, search, date, time, textarea, range) |

| styling        |

'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default'

 | Visual style variant |

| label          |

string

                                | -                   | Input label text                               |

| placeholder    |

string

                                | -                   | Placeholder text                               |

| value          |

string

                                | -                   | Input value (controlled)                       |

| onChange       |

(value: string, name?: string) => void

 | -                 | Change handler function                        |

| validation     |

ValidationRule

                        | -                   | Validation configuration                       |

| error          |

string

                                | -                   | Error message to display                       |

| success        |

boolean | false

             | Success state styling                          |

| loading        |

boolean | false

             | Loading state with spinner                     |

| disabled       |

boolean | false

             | Disabled state                                 |

| readOnly       |

boolean | false

             | Read-only state                                |

| required       |

boolean | false

             | Required field indicator                       |

| size           |

'sm' \| 'md' \| 'lg' | 'md'

              | Input size                                     |

| icon           |

React.ReactNode

                       | -                   | Icon element                                   |

| iconPosition   |

'left' \| 'right' | 'left'

            | Icon position                                  |

| helperText     |

string

                                | -                   | Helper text below input                        |

| showCharacterCount |

boolean | false

             | Show character counter                         |



#### InputFieldType

tsx

type InputFieldType = 

  | 'text' | 'email' | 'password' | 'number' | 'tel' 

  | 'url' | 'search' | 'date' | 'time' | 'textarea' | 'range';





#### ValidationRule Interface

tsx

interface ValidationRule {

  required?: boolean;

  minLength?: number;

  maxLength?: number;

  pattern?: RegExp;

  custom?: (value: string) => string | null;

}





$3

A highly customizable header component with multiple types, sizes, and layout options. Perfect for creating application headers, navigation bars, and page headers with full theme integration.



#### Usage

tsx

import { HeaderComponent } from '@asafarim/shared';



function App() {

  return (

    

              type="default"

        title="My Application"

        subtitle="Welcome to our platform"

        logoText="MA"

        size="md"

        align="space-between"

        elevation="medium"

        showBorder

        showShadow

        leftContent={Dashboard}

        rightContent={Profile}

      />

      

              type="minimal"

        title="Landing Page"

        subtitle="The ultimate solution"

        transparent

        align="center"

        size="lg"

        centerContent={Get Started}

      />

    

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| type           |

'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default'

 | Header visual style variant |

| title          |

string

                                | -                   | Main header title                              |

| subtitle       |

string

                                | -                   | Optional subtitle                              |

| logo           |

ReactNode

                             | -                   | Logo icon component                            |

| logoText       |

string

                                | -                   | Logo text (fallback)                           |

| size           |

'sm' \| 'md' \| 'lg' | 'md'

              | Header size                                    |

| align          |

'left' \| 'center' \| 'right' \| 'space-between' | 'left'

 | Content alignment |

| elevation      |

'none' \| 'low' \| 'medium' \| 'high' | 'none'

 | Shadow elevation |

| fixed          |

boolean | false

             | Fixed positioning                              |

| transparent    |

boolean | false

             | Transparent background                         |

| showBorder     |

boolean | false

             | Show bottom border                             |

| showShadow     |

boolean | false

             | Show shadow                                    |

| backgroundColor |

string

                                | -                   | Custom background color                         |

| textColor      |

string

                                | -                   | Custom text color                              |

| leftContent    |

ReactNode

                             | -                   | Left side content                              |

| rightContent   |

ReactNode

                             | -                   | Right side content                             |

| centerContent  |

ReactNode

                             | -                   | Center content                                 |

| onLogoClick    |

() => void

                            | -                   | Logo click handler                             |

| onTitleClick   |

() => void

                            | -                   | Title click handler                            |

| className      |

string

                                | -                   | Additional CSS classes                         |

| style          |

React.CSSProperties

                   | -                   | Inline styles                                  |



$3

A pre-configured header component optimized for standard page layouts with balanced design and medium elevation.



#### Usage

tsx

import { DefaultPageHeader } from '@asafarim/shared';



function App() {

  return (

          title="Dashboard"

      subtitle="Welcome back, User"

      logoText="D"

      leftContent={

        

          Dashboard

          Analytics

        

      }

      rightContent={

        Profile

      }

      onLogoClick={() => console.log('Logo clicked')}

      onTitleClick={() => console.log('Title clicked')}

    />

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| title          |

string

                                | -                   | Main header title                              |

| subtitle       |

string

                                | -                   | Optional subtitle                              |

| logo           |

ReactNode

                             | -                   | Logo icon component                            |

| logoText       |

string

                                | -                   | Logo text (fallback)                           |

| leftContent    |

ReactNode

                             | -                   | Left side content                              |

| rightContent   |

ReactNode

                             | -                   | Right side content                             |

| centerContent  |

ReactNode

                             | -                   | Center content                                 |

| onLogoClick    |

() => void

                            | -                   | Logo click handler                             |

| onTitleClick   |

() => void

                            | -                   | Title click handler                            |

| fixed          |

boolean | false

             | Fixed positioning                              |

| className      |

string

                                | -                   | Additional CSS classes                         |

| style          |

React.CSSProperties

                   | -                   | Inline styles                                  |



$3

A hero-style header component designed for landing pages with background support and prominent call-to-action integration.



#### Usage

tsx

import { HeroPageHeader } from '@asafarim/shared';



function App() {

  return (

          title="Welcome to Our Platform"

      subtitle="The ultimate solution for your business needs"

      logoText="P"

      backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"

      cta={

        

          Get Started

          

            Learn More

          

        

      }

      leftContent={About}

      rightContent={Contact}

    />

  );

}





#### Props

| Prop               | Type                                    | Default             | Description                                    |

|--------------------|-----------------------------------------|---------------------|------------------------------------------------|

| title              |

string

                                | -                   | Hero title                                     |

| subtitle           |

string

                                | -                   | Hero subtitle                                  |

| logo               |

ReactNode

                             | -                   | Logo icon component                            |

| logoText           |

string

                                | -                   | Logo text (fallback)                           |

| backgroundImage    |

string

                                | -                   | Background image URL                           |

| backgroundGradient |

string

                                | -                   | CSS gradient string                            |

| cta                |

ReactNode

                             | -                   | Call-to-action component                       |

| leftContent        |

ReactNode

                             | -                   | Left side content                              |

| rightContent       |

ReactNode

                             | -                   | Right side content                             |

| onLogoClick        |

() => void

                            | -                   | Logo click handler                             |

| onTitleClick       |

() => void

                            | -                   | Title click handler                            |

| className          |

string

                                | -                   | Additional CSS classes                         |

| style              |

React.CSSProperties

                   | -                   | Inline styles                                  |



$3

A conversion-focused header component optimized for user engagement and sign-up flows with prominent call-to-action button placement.



#### Usage

tsx

import { CallToActionPageHeader } from '@asafarim/shared';



function App() {

  return (

          title="Premium Features"

      subtitle="Unlock the full potential of our platform"

      logoText="PF"

      ctaButton={

        

          Upgrade Now

        

      }

      leftContent={

        

          Features

          Pricing

        

      }

      centerContent={Limited time offer!}

    />

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| title          |

string

                                | -                   | Header title                                   |

| subtitle       |

string

                                | -                   | Header subtitle                                |

| logo           |

ReactNode

                             | -                   | Logo icon component                            |

| logoText       |

string

                                | -                   | Logo text (fallback)                           |

| ctaButton      |

ReactNode

                             | -                   | Required CTA button                            |

| leftContent    |

ReactNode

                             | -                   | Left side content                              |

| centerContent  |

ReactNode

                             | -                   | Center content                                 |

| onLogoClick    |

() => void

                            | -                   | Logo click handler                             |

| onTitleClick   |

() => void

                            | -                   | Title click handler                            |

| fixed          |

boolean | false

             | Fixed positioning                              |

| className      |

string

                                | -                   | Additional CSS classes                         |

| style          |

React.CSSProperties

                   | -                   | Inline styles                                  |



$3

A premium header component with gradient styling and visual impact, perfect for high-impact designs and corporate websites.



#### Usage

tsx

import { FancyPageHeader } from '@asafarim/shared';



function App() {

  return (

          title="Enterprise Solutions"

      subtitle="Built for scale, designed for success"

      logoText="ES"

      gradient="linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)"

      leftContent={

        

          Solutions

          Industries

        

      }

      rightContent={

        

          Contact Sales

        

      }

    />

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| title          |

string

                                | -                   | Header title                                   |

| subtitle       |

string

                                | -                   | Header subtitle                                |

| logo           |

ReactNode

                             | -                   | Logo icon component                            |

| logoText       |

string

                                | -                   | Logo text (fallback)                           |

| icon           |

ReactNode

                             | -                   | Icon component                                 |

| gradient       |

string

                                | -                   | Custom gradient background                     |

| leftContent    |

ReactNode

                             | -                   | Left side content                              |

| rightContent   |

ReactNode

                             | -                   | Right side content                             |

| centerContent  |

ReactNode

                             | -                   | Center content                                 |

| onLogoClick    |

() => void

                            | -                   | Logo click handler                             |

| onTitleClick   |

() => void

                            | -                   | Title click handler                            |

| fixed          |

boolean | false

             | Fixed positioning                              |

| className      |

string

                                | -                   | Additional CSS classes                         |

| style          |

React.CSSProperties

                   | -                   | Inline styles                                  |



$3

A specialized header component designed for admin interfaces and dashboards with built-in stats, pagination, and action buttons.



#### Usage

tsx

import { AdminHeader, ButtonComponent } from '@asafarim/shared';



function App() {

  return (

          title="User Management"

      subtitle="Manage all user accounts and permissions"

      icon={

        
          

        

      }

      totalCount={1247}

      itemName="Users"

      currentPage={1}

      totalPages={5}

      showPagination={true}

      actions={

        

          Add User

          Export

          Settings

        

      }

    />

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| title          |

string

                                | -                   | Main header title                              |

| subtitle       |

string

                                | -                   | Optional subtitle                              |

| icon           |

ReactNode

                             | -                   | Custom icon component                          |

| totalCount     |

number

                                | -                   | Total number of items                          |

| itemName       |

string

                                | -                   | Name of the item type (e.g., "Users", "Products") |

| currentPage    |

number | 1

                 | Current page number                            |

| totalPages     |

number | 1

                 | Total number of pages                          |

| showPagination |

boolean | false

             | Show pagination information                    |

| actions        |

ReactNode

                             | -                   | Action buttons or elements                     |

| className      |

string

                                | -                   | Additional CSS classes                         |

| style          |

React.CSSProperties

                   | -                   | Inline styles                                  |



---



🎨 Theme Integration



This library is designed to work seamlessly with @asafarim/react-themes for automatic dark/light mode switching and consistent theming across your application.



$3

- 🌙 Automatic Dark/Light Mode: Respects system preferences with manual override

- 🎨 CSS Variables: Consistent design system with customizable variables

- ⚡ Smooth Transitions: Seamless theme switching animations

- 📱 Responsive Design: Mobile-first approach with touch-friendly controls

- ♿ Accessibility: WCAG 2.1 AA compliant with keyboard navigation support

- 🎯 Multiple Variants: Each component offers different visual styles

- 🔧 TypeScript Support: Full type definitions for better developer experience

- 📦 Tree Shaking: Optimized bundle size with selective imports



$3



#### Form & Input Components

- SearchItems: 4 visual styles, built-in clear button, focus states

- DDItems: 4 visual styles, custom dropdown arrow, keyboard navigation

- ButtonComponent: 9 variants, 5 sizes, loading states, icon support



#### Display Components  

- PackageLinks: Automatic link generation, responsive layout, icon integration



$3

tsx

import React, { useState } from 'react';

import { ThemeProvider } from '@asafarim/react-themes';

import { PackageLinks, ButtonComponent, SearchItems, DDItems } from '@asafarim/shared';

import '@asafarim/react-themes/styles.css';



function App() {

  const [searchTerm, setSearchTerm] = useState('');

  const [selectedFramework, setSelectedFramework] = useState('');

  

  const frameworkOptions = [

    { value: 'react', label: 'React' },

    { value: 'vue', label: 'Vue.js' },

    { value: 'angular', label: 'Angular' },

  ];



  return (

    

      

        

          Click me!

        

        

                  searchTerm={searchTerm}

          onSearchChange={setSearchTerm}

          placeholder="Search components..."

          searchType="outlined"

        />

        

                  selectedValue={selectedFramework}

          onValueChange={setSelectedFramework}

          items={frameworkOptions}

          dropdownType="outlined"

          placeholder="Select framework..."

        />

        

                  packageName="@asafarim/shared" 

          githubPath="https://github.com/AliSafari-IT/shared" 

        />

      

    

  );

}





---



🛠️ Development



$3

sh

pnpm install

pnpm build

$3

sh

Install demo dependencies

pnpm demo:install



Start demo in dev mode

pnpm demo:dev



Build demo for production

pnpm demo:build



Preview production build

pnpm demo:preview





---



📁 Project Structure



shared/

├── src/            # Library source code

│   ├── components/ # React components

│   │   ├── Button/     # ButtonComponent

│   │   ├── Links/      # PackageLinks

│   │   ├── SearchBox/  # SearchItems

│   │   ├── Dropdowns/  # DDItems

│   │   └── Inputs/     # InputFields

│   ├── styles/     # Global CSS variables and theme system

│   ├── index.ts    # Entry point

│   └── types.d.ts  # TypeScript definitions

├── demo/           # Demo app (Vite + React)

│   ├── src/

│   │   ├── components/ # Demo components

│   │   │   ├── Overview.tsx

│   │   │   ├── PackageLinksDemo.tsx

│   │   │   ├── ButtonComponentDemo.tsx

│   │   │   ├── SearchItemsDemo.tsx

│   │   │   ├── DDItemsDemo.tsx

│   │   │   └── InputFieldsDemo.tsx

│   │   └── pages/

│   └── dist/       # Built demo

├── dist/           # Built library

├── package.json    # v1.1.1

├── rollup.config.js # Build configuration

└── tsconfig.json   # TypeScript configuration





---



🚢 Deployment



- The demo is auto-deployed to GitHub Pages on every push to

main



- Workflow: Build library → Build demo → Deploy to https://alisafari-it.github.io/shared/

- Package is published to npm with public access



---



📦 Version History



$3

- ✨ Added

ButtonComponent

 with professional styling and glass morphism effects

- 🎨 Enhanced theme integration with comprehensive CSS variable system

- 📱 Improved responsive design and accessibility features

- 🔧 Fixed build configuration for better CSS handling



$3

- � Initial release with

PackageLinks

 component

- 📚 Basic demo application and documentation



---



🤝 Contributing



1. Fork the repository

2. Create your feature branch (

git checkout -b feature/amazing-feature

)

3. Commit your changes (

git commit -m 'Add some amazing feature'

)

4. Push to the branch (

git push origin feature/amazing-feature

)

5. Open a Pull Request



---



�📄 License



MIT © AliSafari-IT



---



🔗 Related Packages



- @asafarim/react-themes - Theme system integration

- @asafarim/display-code - Code syntax highlighting component



---



📖 Quick Reference



$3

tsx

import { 

  PackageLinks,      // Link display component

  ButtonComponent,   // Versatile button with variants

  SearchItems,       // Search input with styles

  DDItems,          // Dropdown/select component

  InputFields       // Comprehensive form input with 10+ types

} from '@asafarim/shared';

$3

tsx

// Basic form with all components

function ContactForm() {

  const [search, setSearch] = useState('');

  const [category, setCategory] = useState('');

  const [email, setEmail] = useState('');

  const [message, setMessage] = useState('');

  

  return (

    

              searchTerm={search}

        onSearchChange={setSearch}

        searchType="outlined"

        placeholder="Search..."

      />

      

              selectedValue={category}

        onValueChange={setCategory}

        items={categoryOptions}

        dropdownType="outlined"

        placeholder="Select category"

      />

      

              type="email"

        styling="outlined"

        label="Email Address"

        value={email}

        onChange={setEmail}

        placeholder="your@email.com"

        required={true}

      />

      

              type="textarea"

        styling="outlined"

        label="Message"

        value={message}

        onChange={setMessage}

        placeholder="Your message..."

        rows={4}

      />

      

              type="submit" 

        variant="primary"

        size="lg"

      >

        Submit

      

    

  );

}





$3

- Button Variants:

primary, secondary, success, danger, warning, info, outline, ghost, link



- Button Sizes:

xs, sm, md, lg, xl



- Search/Dropdown/Input Types:

default, compact, outlined, minimal



- Input Field Types:

text, email, password, number, tel, url, search, date, time, textarea`, ...

@asafarim/shared

🚀 Quick Install

sh

Install the component library

pnpm add @asafarim/shared



Install with theme system (recommended)

pnpm add @asafarim/shared @asafarim/react-themes



or with npm

npm install @asafarim/shared @asafarim/react-themes





🎨 Import Styles



Important: Components require CSS imports to display correctly.

tsx

// Import styles in your main entry file

import '@asafarim/shared/dist/styles.css';



// Then use components

import { ButtonComponent, SearchItems, DDItems, InputFields } from '@asafarim/shared';





📖 For detailed styling instructions, see STYLING.md



---



💻 Code Usage Examples



$3

tsx

import React from 'react';

import { ThemeProvider } from '@asafarim/react-themes';

import { 

  ButtonComponent, 

  SearchItems, 

  DDItems, 

  InputFields,

  HeaderComponent,

  DefaultPageHeader,

  HeroPageHeader,

  CallToActionPageHeader,

  FancyPageHeader

} from '@asafarim/shared';

import '@asafarim/react-themes/styles.css';

import '@asafarim/shared/dist/styles.css';



function App() {

  return (

    

      

        {/ Your components here /}

      

    

  );

}

$3

tsx

import React, { useState } from 'react';

import { ThemeProvider } from '@asafarim/react-themes';

import { 

  ButtonComponent, 

  SearchItems, 

  DDItems, 

  InputFields,

  HeaderComponent,

  DefaultPageHeader,

  HeroPageHeader,

  CallToActionPageHeader,

  FancyPageHeader,

  PackageLinks

} from '@asafarim/shared';

import '@asafarim/react-themes/styles.css';

import '@asafarim/shared/dist/styles.css';



function App() {

  const [searchTerm, setSearchTerm] = useState('');

  const [selectedFramework, setSelectedFramework] = useState('');

  const [formData, setFormData] = useState({

    name: '',

    email: '',

    message: ''

  });



  const frameworkOptions = [

    { value: 'react', label: 'React' },

    { value: 'vue', label: 'Vue.js' },

    { value: 'angular', label: 'Angular' },

    { value: 'svelte', label: 'Svelte' }

  ];



  return (

    

      

        {/ Header Components /}

                  title="My Application"

          subtitle="Welcome to our platform"

          logoText="MA"

          leftContent={

            

              Dashboard

              Analytics

            

          }

          rightContent={

            Profile

          }

        />



        {/ Hero Header for Landing Page /}

                  title="Welcome to Our Platform"

          subtitle="The ultimate solution for your business needs"

          backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"

          cta={

            

              Get Started

              

                Learn More

              

            

          }

        />



        {/ Main Content /}

        

          {/ Search and Filter Section /}

          

                          searchTerm={searchTerm}

              onSearchChange={setSearchTerm}

              placeholder="Search components..."

              searchType="default"

            />

            

                          selectedValue={selectedFramework}

              onValueChange={setSelectedFramework}

              items={frameworkOptions}

              dropdownType="outlined"

              placeholder="Select framework..."

            />

          



          {/ Form Section /}

          

            Contact Form

                          type="text"

              styling="default"

              label="Full Name"

              placeholder="Enter your name"

              value={formData.name}

              onChange={(value) => setFormData(prev => ({ ...prev, name: value }))}

              required

            />



                          styling="outlined"

              label="Email Address"

              placeholder="user@example.com"

              value={formData.email}

              onChange={(value) => setFormData(prev => ({ ...prev, email: value }))}

              validation={{ required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ }}

              validateOnChange

              helperText="Enter a valid email address"

            />



                          styling="minimal"

              label="Message"

              placeholder="Share your thoughts..."

              value={formData.message}

              onChange={(value) => setFormData(prev => ({ ...prev, message: value }))}

              rows={4}

              validation={{ maxLength: 500 }}

              showCharacterCount

              helperText="Maximum 500 characters"

            />

          



          {/ Action Buttons /}

          

            

              Submit Form

            

            

            

              Save Draft

            

            

            

              Cancel

            

          



          {/ Package Links /}

                      packageName="@asafarim/shared"

            githubPath="packages/shared"

            demoPath="packages/shared"

          />

        



        {/ Call to Action Header /}

                  title="Ready to Get Started?"

          subtitle="Join thousands of developers using our platform"

          ctaButton={

            

              Start Free Trial

            

          }

        />



        {/ Fancy Header for Premium Section /}

                  title="Enterprise Solutions"

          subtitle="Built for scale, designed for success"

          gradient="linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)"

          leftContent={

            

              Solutions

              Industries

            

          }

          rightContent={

            

              Contact Sales

            

          }

        />

      

    

  );

}



export default App;





$3



#### Header Components

tsx

// Base Header Component (Highly Customizable)

  type="default"

  title="My Application"

  subtitle="Welcome to our platform"

  logoText="MA"

  size="md"

  align="space-between"

  elevation="medium"

  showBorder

  showShadow

  leftContent={Dashboard}

  rightContent={Profile}

/>



// Pre-configured Header Variants

  title="Dashboard"

  subtitle="Welcome back, User"

  logoText="D"

  leftContent={/ navigation items /}

  rightContent={/ user actions /}

/>



  title="Welcome to Our Platform"

  subtitle="The ultimate solution for your business needs"

  backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"

  cta={/ call-to-action buttons /}

/>



  title="Premium Features"

  subtitle="Unlock the full potential of our platform"

  ctaButton={Upgrade Now}

/>



  title="Enterprise Solutions"

  subtitle="Built for scale, designed for success"

  gradient="linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)"

/>





#### Form Components

tsx

// Search Component

  searchTerm={searchTerm}

  onSearchChange={setSearchTerm}

  placeholder="Search components..."

  searchType="default"

/>



// Dropdown Component

  selectedValue={selectedValue}

  onValueChange={setSelectedValue}

  items={[

    { value: 'react', label: 'React' },

    { value: 'vue', label: 'Vue.js' },

    { value: 'angular', label: 'Angular' }

  ]}

  dropdownType="outlined"

  placeholder="Select framework..."

/>



// Input Fields

  type="text"

  styling="default"

  label="Full Name"

  placeholder="Enter your name"

  value={name}

  onChange={setName}

  required

/>



  styling="outlined"

  label="Email Address"

  placeholder="user@example.com"

  value={email}

  onChange={setEmail}

  validation={{ required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ }}

  validateOnChange

/>





#### Button Component

tsx

// Different Variants

Primary Button

Secondary Button

Success Button

Disabled Button

Loading Button



// With Icons

  variant="primary" 

  leftIcon={📧}

  rightIcon={→}

>

  Send Email





---



🌐 Live Demo & Documentation



- Live Demo: alisafari-it.github.io/shared

- Source: github.com/AliSafari-IT/shared



Explore all components with interactive examples, theme switching, and comprehensive prop documentation.



---



🧩 Components



This library currently includes five main components, each with multiple variants and comprehensive theme integration:



| Component | Description | Styles | Status |

|-----------|-------------|---------|--------|

| PackageLinks | Display links to npm, GitHub, and demos | Theme-aware styling | ✅ Ready |

| ButtonComponent | Versatile button with 9 variants, 5 sizes | Primary, Secondary, Success, Danger, Warning, Info, Outline, Ghost, Link | ✅ Ready |

| SearchItems | Flexible search input with clear functionality | Default, Compact, Outlined, Minimal | ✅ Ready |

| DDItems | Dropdown/select with customizable options | Default, Compact, Outlined, Minimal | ✅ Ready |

| InputFields | Comprehensive form input with 10+ input types | Default, Compact, Outlined, Minimal | ✅ Ready |

| HeaderComponent | Highly customizable header component | Default, Compact, Outlined, Minimal | ✅ Ready |

| Header Wrappers | Pre-configured header variants | DefaultPageHeader, HeroPageHeader, CallToActionPageHeader, FancyPageHeader | ✅ Ready |



$3

A flexible, theme-aware component for displaying links to npm packages, GitHub repositories, and live demos.



#### Usage

tsx

import React from 'react';

import { ThemeProvider } from '@asafarim/react-themes';

import { PackageLinks } from '@asafarim/shared';

import '@asafarim/react-themes/styles.css';



function App() {

  return (

    

              packageName="@asafarim/display-code"

        githubPath="packages/display-code"

        demoPath="packages/display-code"

      />

    

  );

}





#### Props

| Prop         | Type   | Required | Description                                                        |

|--------------|--------|----------|--------------------------------------------------------------------|

| packageName  | string | Yes      | The npm package name (e.g.,

@asafarim/display-code

)              |

| githubPath   | string | Yes      | Path to the package in the GitHub repo (e.g.,

packages/display-code

) |

| demoPath     | string | No       | Path to the demo in GitHub Pages (e.g.,

packages/display-code

)   |



$3

A versatile, professional button component with multiple variants, sizes, and states. Features modern glass morphism effects and full accessibility support.



#### Usage

tsx

import { ButtonComponent } from '@asafarim/shared';



function App() {

  return (

    

      

        Primary Button

      

      

      

        Loading Button

      

      

      

        Disabled Button

      

    

  );

}





#### Props

| Prop         | Type                                    | Default     | Description                                    |

|--------------|-----------------------------------------|-------------|------------------------------------------------|

| variant      |

 | Button visual style variant |

| size         |

'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md'

      | Button size                                    |

| loading      |

boolean | false

     | Shows loading spinner                          |

| disabled     |

boolean | false

     | Disables the button                            |

| fullWidth    |

boolean | false

     | Makes button full width                        |

| leftIcon     |

ReactNode

                             | -           | Icon displayed on the left                     |

| rightIcon    |

ReactNode

                             | -           | Icon displayed on the right                    |

| onClick      |

(event: MouseEvent) => void

           | -           | Click handler                                  |

| type         |

'button' \| 'submit' \| 'reset' | 'button'

  | Button HTML type                               |

| className    |

string

                                | -           | Additional CSS classes                         |

| children     |

ReactNode

                             | -           | Button content                                 |



$3

A flexible search input component with multiple visual styles and built-in clear functionality. Perfect for filtering, searching, and form inputs.



#### Usage

tsx

import { SearchItems } from '@asafarim/shared';



function App() {

  const [searchTerm, setSearchTerm] = useState('');

  

  return (

    

              searchTerm={searchTerm}

        onSearchChange={setSearchTerm}

        placeholder="Search components..."

        searchType="default"

      />

      

              searchTerm={searchTerm}

        onSearchChange={setSearchTerm}

        placeholder="Filter results..."

        searchType="outlined"

      />

    

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| searchTerm     |

string

                                | -                   | Current search value (controlled)              |

| onSearchChange |

(value: string) => void

               | -                   | Callback when search value changes             |

| placeholder    |

string | "Search projects..."

 | Placeholder text for the input              |

| className      |

string | "search-input"

    | CSS class name for the input element          |

| searchType     |

'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default'

 | Visual style variant |



$3

A dropdown/select component with customizable options and multiple visual styles. Ideal for forms, filters, and selection controls.



#### Usage

tsx

import { DDItems } from '@asafarim/shared';



function App() {

  const [selectedValue, setSelectedValue] = useState('');

  

  const options = [

    { value: 'react', label: 'React' },

    { value: 'vue', label: 'Vue.js' },

    { value: 'angular', label: 'Angular' },

  ];

  

  return (

    

              selectedValue={selectedValue}

        onValueChange={setSelectedValue}

        items={options}

        dropdownType="default"

        placeholder="Select framework..."

      />

      

              selectedValue={selectedValue}

        onValueChange={setSelectedValue}

        items={options}

        dropdownType="outlined"

        placeholder="Choose option..."

      />

    

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| selectedValue  |

string

                                | -                   | Currently selected value (controlled)          |

| onValueChange  |

(value: string) => void

               | -                   | Callback when selection changes                |

| items          |

DropdownItem[]

                        | -                   | Array of options with value and label         |

| dropdownType   |

'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default'

 | Visual style variant |

| className      |

string | "filter-select"

   | CSS class name for the select element         |

| placeholder    |

string | "Select an option"

 | Placeholder text when no option selected     |



#### DropdownItem Interface

tsx

interface DropdownItem {

  value: string;

  label: string;

}





$3

A comprehensive form input component supporting 10+ input types with validation, states, and accessibility features. Perfect for building robust forms with consistent styling.



#### Usage

Demonstrating both the generic

InputFields

 API and static subcomponents:

tsx

import React, { useState } from 'react';

import { InputFields } from '@asafarim/shared';



function App() {

  const [name, setName] = useState('');

  const [email, setEmail] = useState('');

  const [comments, setComments] = useState('');

  const [volume, setVolume] = useState('50');



  return (

    

      {/ Generic API /}

              type="text"

        styling="default"

        label="Full Name"

        placeholder="Enter your name"

        value={name}

        onChange={setName}

        required

      />



      {/ Static subcomponents /}

              styling="outlined"

        label="Email Address"

        placeholder="user@example.com"

        value={email}

        onChange={setEmail}

        validation={{ required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ }}

        validateOnChange

        icon="📧"

        iconPosition="left"

        helperText="Enter a valid email address"

      />



              styling="minimal"

        label="Comments"

        placeholder="Share your thoughts..."

        value={comments}

        onChange={setComments}

        rows={4}

        validation={{ maxLength: 500 }}

        showCharacterCount

        helperText="Maximum 500 characters"

      />



              styling="default"

        label="Volume"

        min={0}

        max={100}

        step={1}

        value={volume}

        onChange={setVolume}

      />

    

  );

}

   



#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| type           |

InputFieldType | 'text'

           | Input type (text, email, password, number, tel, url, search, date, time, textarea, range) |

| styling        |

'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default'

 | Visual style variant |

| label          |

string

                                | -                   | Input label text                               |

| placeholder    |

string

                                | -                   | Placeholder text                               |

| value          |

string

                                | -                   | Input value (controlled)                       |

| onChange       |

(value: string, name?: string) => void

 | -                 | Change handler function                        |

| validation     |

ValidationRule

                        | -                   | Validation configuration                       |

| error          |

string

                                | -                   | Error message to display                       |

| success        |

boolean | false

             | Success state styling                          |

| loading        |

boolean | false

             | Loading state with spinner                     |

| disabled       |

boolean | false

             | Disabled state                                 |

| readOnly       |

boolean | false

             | Read-only state                                |

| required       |

boolean | false

             | Required field indicator                       |

| size           |

'sm' \| 'md' \| 'lg' | 'md'

              | Input size                                     |

| icon           |

React.ReactNode

                       | -                   | Icon element                                   |

| iconPosition   |

'left' \| 'right' | 'left'

            | Icon position                                  |

| helperText     |

string

                                | -                   | Helper text below input                        |

| showCharacterCount |

boolean | false

             | Show character counter                         |



#### InputFieldType

tsx

type InputFieldType = 

  | 'text' | 'email' | 'password' | 'number' | 'tel' 

  | 'url' | 'search' | 'date' | 'time' | 'textarea' | 'range';





#### ValidationRule Interface

tsx

interface ValidationRule {

  required?: boolean;

  minLength?: number;

  maxLength?: number;

  pattern?: RegExp;

  custom?: (value: string) => string | null;

}





$3

A highly customizable header component with multiple types, sizes, and layout options. Perfect for creating application headers, navigation bars, and page headers with full theme integration.



#### Usage

tsx

import { HeaderComponent } from '@asafarim/shared';



function App() {

  return (

    

              type="default"

        title="My Application"

        subtitle="Welcome to our platform"

        logoText="MA"

        size="md"

        align="space-between"

        elevation="medium"

        showBorder

        showShadow

        leftContent={Dashboard}

        rightContent={Profile}

      />

      

              type="minimal"

        title="Landing Page"

        subtitle="The ultimate solution"

        transparent

        align="center"

        size="lg"

        centerContent={Get Started}

      />

    

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| type           |

'default' \| 'compact' \| 'outlined' \| 'minimal' | 'default'

 | Header visual style variant |

| title          |

string

                                | -                   | Main header title                              |

| subtitle       |

string

                                | -                   | Optional subtitle                              |

| logo           |

ReactNode

                             | -                   | Logo icon component                            |

| logoText       |

string

                                | -                   | Logo text (fallback)                           |

| size           |

'sm' \| 'md' \| 'lg' | 'md'

              | Header size                                    |

| align          |

'left' \| 'center' \| 'right' \| 'space-between' | 'left'

 | Content alignment |

| elevation      |

'none' \| 'low' \| 'medium' \| 'high' | 'none'

 | Shadow elevation |

| fixed          |

boolean | false

             | Fixed positioning                              |

| transparent    |

boolean | false

             | Transparent background                         |

| showBorder     |

boolean | false

             | Show bottom border                             |

| showShadow     |

boolean | false

             | Show shadow                                    |

| backgroundColor |

string

                                | -                   | Custom background color                         |

| textColor      |

string

                                | -                   | Custom text color                              |

| leftContent    |

ReactNode

                             | -                   | Left side content                              |

| rightContent   |

ReactNode

                             | -                   | Right side content                             |

| centerContent  |

ReactNode

                             | -                   | Center content                                 |

| onLogoClick    |

() => void

                            | -                   | Logo click handler                             |

| onTitleClick   |

() => void

                            | -                   | Title click handler                            |

| className      |

string

                                | -                   | Additional CSS classes                         |

| style          |

React.CSSProperties

                   | -                   | Inline styles                                  |



$3

A pre-configured header component optimized for standard page layouts with balanced design and medium elevation.



#### Usage

tsx

import { DefaultPageHeader } from '@asafarim/shared';



function App() {

  return (

          title="Dashboard"

      subtitle="Welcome back, User"

      logoText="D"

      leftContent={

        

          Dashboard

          Analytics

        

      }

      rightContent={

        Profile

      }

      onLogoClick={() => console.log('Logo clicked')}

      onTitleClick={() => console.log('Title clicked')}

    />

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| title          |

string

                                | -                   | Main header title                              |

| subtitle       |

string

                                | -                   | Optional subtitle                              |

| logo           |

ReactNode

                             | -                   | Logo icon component                            |

| logoText       |

string

                                | -                   | Logo text (fallback)                           |

| leftContent    |

ReactNode

                             | -                   | Left side content                              |

| rightContent   |

ReactNode

                             | -                   | Right side content                             |

| centerContent  |

ReactNode

                             | -                   | Center content                                 |

| onLogoClick    |

() => void

                            | -                   | Logo click handler                             |

| onTitleClick   |

() => void

                            | -                   | Title click handler                            |

| fixed          |

boolean | false

             | Fixed positioning                              |

| className      |

string

                                | -                   | Additional CSS classes                         |

| style          |

React.CSSProperties

                   | -                   | Inline styles                                  |



$3

A hero-style header component designed for landing pages with background support and prominent call-to-action integration.



#### Usage

tsx

import { HeroPageHeader } from '@asafarim/shared';



function App() {

  return (

          title="Welcome to Our Platform"

      subtitle="The ultimate solution for your business needs"

      logoText="P"

      backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"

      cta={

        

          Get Started

          

            Learn More

          

        

      }

      leftContent={About}

      rightContent={Contact}

    />

  );

}





#### Props

| Prop               | Type                                    | Default             | Description                                    |

|--------------------|-----------------------------------------|---------------------|------------------------------------------------|

| title              |

string

                                | -                   | Hero title                                     |

| subtitle           |

string

                                | -                   | Hero subtitle                                  |

| logo               |

ReactNode

                             | -                   | Logo icon component                            |

| logoText           |

string

                                | -                   | Logo text (fallback)                           |

| backgroundImage    |

string

                                | -                   | Background image URL                           |

| backgroundGradient |

string

                                | -                   | CSS gradient string                            |

| cta                |

ReactNode

                             | -                   | Call-to-action component                       |

| leftContent        |

ReactNode

                             | -                   | Left side content                              |

| rightContent       |

ReactNode

                             | -                   | Right side content                             |

| onLogoClick        |

() => void

                            | -                   | Logo click handler                             |

| onTitleClick       |

() => void

                            | -                   | Title click handler                            |

| className          |

string

                                | -                   | Additional CSS classes                         |

| style              |

React.CSSProperties

                   | -                   | Inline styles                                  |



$3

A conversion-focused header component optimized for user engagement and sign-up flows with prominent call-to-action button placement.



#### Usage

tsx

import { CallToActionPageHeader } from '@asafarim/shared';



function App() {

  return (

          title="Premium Features"

      subtitle="Unlock the full potential of our platform"

      logoText="PF"

      ctaButton={

        

          Upgrade Now

        

      }

      leftContent={

        

          Features

          Pricing

        

      }

      centerContent={Limited time offer!}

    />

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| title          |

string

                                | -                   | Header title                                   |

| subtitle       |

string

                                | -                   | Header subtitle                                |

| logo           |

ReactNode

                             | -                   | Logo icon component                            |

| logoText       |

string

                                | -                   | Logo text (fallback)                           |

| ctaButton      |

ReactNode

                             | -                   | Required CTA button                            |

| leftContent    |

ReactNode

                             | -                   | Left side content                              |

| centerContent  |

ReactNode

                             | -                   | Center content                                 |

| onLogoClick    |

() => void

                            | -                   | Logo click handler                             |

| onTitleClick   |

() => void

                            | -                   | Title click handler                            |

| fixed          |

boolean | false

             | Fixed positioning                              |

| className      |

string

                                | -                   | Additional CSS classes                         |

| style          |

React.CSSProperties

                   | -                   | Inline styles                                  |



$3

A premium header component with gradient styling and visual impact, perfect for high-impact designs and corporate websites.



#### Usage

tsx

import { FancyPageHeader } from '@asafarim/shared';



function App() {

  return (

          title="Enterprise Solutions"

      subtitle="Built for scale, designed for success"

      logoText="ES"

      gradient="linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)"

      leftContent={

        

          Solutions

          Industries

        

      }

      rightContent={

        

          Contact Sales

        

      }

    />

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| title          |

string

                                | -                   | Header title                                   |

| subtitle       |

string

                                | -                   | Header subtitle                                |

| logo           |

ReactNode

                             | -                   | Logo icon component                            |

| logoText       |

string

                                | -                   | Logo text (fallback)                           |

| icon           |

ReactNode

                             | -                   | Icon component                                 |

| gradient       |

string

                                | -                   | Custom gradient background                     |

| leftContent    |

ReactNode

                             | -                   | Left side content                              |

| rightContent   |

ReactNode

                             | -                   | Right side content                             |

| centerContent  |

ReactNode

                             | -                   | Center content                                 |

| onLogoClick    |

() => void

                            | -                   | Logo click handler                             |

| onTitleClick   |

() => void

                            | -                   | Title click handler                            |

| fixed          |

boolean | false

             | Fixed positioning                              |

| className      |

string

                                | -                   | Additional CSS classes                         |

| style          |

React.CSSProperties

                   | -                   | Inline styles                                  |



$3

A specialized header component designed for admin interfaces and dashboards with built-in stats, pagination, and action buttons.



#### Usage

tsx

import { AdminHeader, ButtonComponent } from '@asafarim/shared';



function App() {

  return (

          title="User Management"

      subtitle="Manage all user accounts and permissions"

      icon={

        
          

        

      }

      totalCount={1247}

      itemName="Users"

      currentPage={1}

      totalPages={5}

      showPagination={true}

      actions={

        

          Add User

          Export

          Settings

        

      }

    />

  );

}





#### Props

| Prop           | Type                                    | Default             | Description                                    |

|----------------|-----------------------------------------|---------------------|------------------------------------------------|

| title          |

string

                                | -                   | Main header title                              |

| subtitle       |

string

                                | -                   | Optional subtitle                              |

| icon           |

ReactNode

                             | -                   | Custom icon component                          |

| totalCount     |

number

                                | -                   | Total number of items                          |

| itemName       |

string

                                | -                   | Name of the item type (e.g., "Users", "Products") |

| currentPage    |

number | 1

                 | Current page number                            |

| totalPages     |

number | 1

                 | Total number of pages                          |

| showPagination |

boolean | false

             | Show pagination information                    |

| actions        |

ReactNode

                             | -                   | Action buttons or elements                     |

| className      |

string

                                | -                   | Additional CSS classes                         |

| style          |

React.CSSProperties

                   | -                   | Inline styles                                  |



---



🎨 Theme Integration



This library is designed to work seamlessly with @asafarim/react-themes for automatic dark/light mode switching and consistent theming across your application.



$3

- 🌙 Automatic Dark/Light Mode: Respects system preferences with manual override

- 🎨 CSS Variables: Consistent design system with customizable variables

- ⚡ Smooth Transitions: Seamless theme switching animations

- 📱 Responsive Design: Mobile-first approach with touch-friendly controls

- ♿ Accessibility: WCAG 2.1 AA compliant with keyboard navigation support

- 🎯 Multiple Variants: Each component offers different visual styles

- 🔧 TypeScript Support: Full type definitions for better developer experience

- 📦 Tree Shaking: Optimized bundle size with selective imports



$3



#### Form & Input Components

- SearchItems: 4 visual styles, built-in clear button, focus states

- DDItems: 4 visual styles, custom dropdown arrow, keyboard navigation

- ButtonComponent: 9 variants, 5 sizes, loading states, icon support



#### Display Components  

- PackageLinks: Automatic link generation, responsive layout, icon integration



$3

tsx

import React, { useState } from 'react';

import { ThemeProvider } from '@asafarim/react-themes';

import { PackageLinks, ButtonComponent, SearchItems, DDItems } from '@asafarim/shared';

import '@asafarim/react-themes/styles.css';



function App() {

  const [searchTerm, setSearchTerm] = useState('');

  const [selectedFramework, setSelectedFramework] = useState('');

  

  const frameworkOptions = [

    { value: 'react', label: 'React' },

    { value: 'vue', label: 'Vue.js' },

    { value: 'angular', label: 'Angular' },

  ];



  return (

    

      

        

          Click me!

        

        

                  searchTerm={searchTerm}

          onSearchChange={setSearchTerm}

          placeholder="Search components..."

          searchType="outlined"

        />

        

                  selectedValue={selectedFramework}

          onValueChange={setSelectedFramework}

          items={frameworkOptions}

          dropdownType="outlined"

          placeholder="Select framework..."

        />

        

                  packageName="@asafarim/shared" 

          githubPath="https://github.com/AliSafari-IT/shared" 

        />

      

    

  );

}





---



🛠️ Development



$3

sh

pnpm install

pnpm build

$3

sh

Install demo dependencies

pnpm demo:install



Start demo in dev mode

pnpm demo:dev



Build demo for production

pnpm demo:build



Preview production build

pnpm demo:preview





---



📁 Project Structure



shared/

├── src/            # Library source code

│   ├── components/ # React components

│   │   ├── Button/     # ButtonComponent

│   │   ├── Links/      # PackageLinks

│   │   ├── SearchBox/  # SearchItems

│   │   ├── Dropdowns/  # DDItems

│   │   └── Inputs/     # InputFields

│   ├── styles/     # Global CSS variables and theme system

│   ├── index.ts    # Entry point

│   └── types.d.ts  # TypeScript definitions

├── demo/           # Demo app (Vite + React)

│   ├── src/

│   │   ├── components/ # Demo components

│   │   │   ├── Overview.tsx

│   │   │   ├── PackageLinksDemo.tsx

│   │   │   ├── ButtonComponentDemo.tsx

│   │   │   ├── SearchItemsDemo.tsx

│   │   │   ├── DDItemsDemo.tsx

│   │   │   └── InputFieldsDemo.tsx

│   │   └── pages/

│   └── dist/       # Built demo

├── dist/           # Built library

├── package.json    # v1.1.1

├── rollup.config.js # Build configuration

└── tsconfig.json   # TypeScript configuration





---



🚢 Deployment



- The demo is auto-deployed to GitHub Pages on every push to

main



- Workflow: Build library → Build demo → Deploy to https://alisafari-it.github.io/shared/

- Package is published to npm with public access



---



📦 Version History



$3

- ✨ Added

ButtonComponent

 with professional styling and glass morphism effects

- 🎨 Enhanced theme integration with comprehensive CSS variable system

- 📱 Improved responsive design and accessibility features

- 🔧 Fixed build configuration for better CSS handling



$3

- � Initial release with

PackageLinks

 component

- 📚 Basic demo application and documentation



---



🤝 Contributing



1. Fork the repository

2. Create your feature branch (

git checkout -b feature/amazing-feature

)

3. Commit your changes (

git commit -m 'Add some amazing feature'

)

4. Push to the branch (

git push origin feature/amazing-feature

)

5. Open a Pull Request



---



�📄 License



MIT © AliSafari-IT



---



🔗 Related Packages



- @asafarim/react-themes - Theme system integration

- @asafarim/display-code - Code syntax highlighting component



---



📖 Quick Reference



$3

tsx

import { 

  PackageLinks,      // Link display component

  ButtonComponent,   // Versatile button with variants

  SearchItems,       // Search input with styles

  DDItems,          // Dropdown/select component

  InputFields       // Comprehensive form input with 10+ types

} from '@asafarim/shared';

$3

tsx

// Basic form with all components

function ContactForm() {

  const [search, setSearch] = useState('');

  const [category, setCategory] = useState('');

  const [email, setEmail] = useState('');

  const [message, setMessage] = useState('');

  

  return (

    

              searchTerm={search}

        onSearchChange={setSearch}

        searchType="outlined"

        placeholder="Search..."

      />

      

              selectedValue={category}

        onValueChange={setCategory}

        items={categoryOptions}

        dropdownType="outlined"

        placeholder="Select category"

      />

      

              type="email"

        styling="outlined"

        label="Email Address"

        value={email}

        onChange={setEmail}

        placeholder="your@email.com"

        required={true}

      />

      

              type="textarea"

        styling="outlined"

        label="Message"

        value={message}

        onChange={setMessage}

        placeholder="Your message..."

        rows={4}

      />

      

              type="submit" 

        variant="primary"

        size="lg"

      >

        Submit

      

    

  );

}





$3

- Button Variants:

primary, secondary, success, danger, warning, info, outline, ghost, link



- Button Sizes:

xs, sm, md, lg, xl



- Search/Dropdown/Input Types:

default, compact, outlined, minimal



- Input Field Types:

text, email, password, number, tel, url, search, date, time, textarea`, ...