npm package: @daxso/ui_kit
Description: A comprehensive collection of UI components built with Grommet, HPE Design Tokens, and React.  This framework kit demonstrates best practices for building applications with HPE's design system.
Latest version: 1.1.1

# HPE UI Framework Kit

A comprehensive collection of UI components built with Grommet, HPE Design Tokens, and React. 
This framework kit demonstrates best practices for building applications with HPE's design system.


## Components Included

### Layout Components
- **AppHeader** - Responsive header with search functionality and HPE branding
- **AppSidebar** - Navigation sidebar with avatar and action buttons
- **AppFooter** - Responsive footer with copyright and navigation links
- **BoxExample** - Flexible container components for content layout
- **GridExample** - Grid-based layout system for complex arrangements
- **MainExample** - Main content area with highlighted background
- **LayerSideDrawer** - Modal side drawer with form components

### Card Components
- **Card** - Base card component with flexible content areas
- **EventPromotionCard** - Specialized card for promoting events with media and actions

### UI Components
- **TextEmphasis** - Emphasized text component with HPE styling


## Dependencies

### Core Dependencies
- **Next.js 15.4.6** - React framework for production
- **React 19.1.0** - JavaScript library for building user interfaces
- **Grommet** - React-based framework providing accessibility, modularity, responsiveness
- **hpe-design-tokens 1.4.0** - Official HPE design tokens
- **styled-components** - CSS-in-JS library for styling

### Development Dependencies
- **TypeScript 5** - Type checking and development tooling
- **ESLint** - Code linting and quality assurance
- **Tailwind CSS 4** - Utility-first CSS framework


## Usage

### Basic Component Import
```javascript
import { AppHeader, AppSidebar, Card } from '../components';

// Use components in your application
<AppHeader />
<AppSidebar />
<Card title="My Card" description="Card content" />
```

### Theme Integration
```javascript
import { ThemeProvider } from '../components/ThemeProvider';

function App() {
  return (
    <ThemeProvider>
      {/* Your app components */}
    </ThemeProvider>
  );
}
```


## Customization

### Extending Components
All components accept standard props and can be extended:

```javascript
<Card 
  title="Custom Card"
  width="large"
  onClick={handleClick}
  background="custom-background"
/>
```

### Theme Customization
Modify the theme in `components/ThemeProvider.js`:

```javascript
const customTheme = {
  global: {
    colors: {
      brand: 'var(--hpe-color-primary-strong, #01A982)',
      // Add your custom colors
    },
  },
};
```

## HPE Design Tokens

This project uses the official `hpe-design-tokens` package which provides:

- **Color tokens** - Primary, secondary, text, background, and border colors
- **Typography tokens** - Font families, sizes, weights, and line heights  
- **Spacing tokens** - Consistent spacing scale for margins and padding
- **Component tokens** - Specific styling for individual components
- **Responsive tokens** - Different values for various screen sizes

### Token Categories
- **Primitive tokens** - Base values (colors, dimensions)
- **Semantic tokens** - Purpose-driven tokens (primary, secondary, etc.)
- **Component tokens** - Component-specific styling