npm package: @jkeyser/ui-kit
Description: A personal UI component library for React applications
Author: Jeffrey Keyser
Latest version: 0.5.3

# Personal UI Kit

A personal UI component library for React applications with a focus on accessibility and theming.

## Version

Latest version: 0.5.3

## Installation

```bash
npm install @jkeyser/ui-kit
# or
yarn add @jkeyser/ui-kit
```

## Dependencies

This package has the following peer dependencies:
- react
- react-dom
- react-router-dom
- styled-components

## Usage

```jsx
import { ThemeProvider, Button } from '@jkeyser/ui-kit';

function App() {
  return (
    <ThemeProvider>
      <Button variant="primary">Click Me</Button>
    </ThemeProvider>
  );
}
```

## Components

The UI Kit includes the following components:

- Accordion - Expandable content panels
- Alert - Display important messages to users
- Avatar - Display user profile images or initials
- Badge - Show counts, status, or labels
- Breadcrumbs - Navigation path indicators
- Button - Trigger actions or navigation
- Card - Container for related content
- Checkbox - Allow users to select multiple options
- CircularProgress - Show loading state in a circular format
- Collapse - Toggle visibility of content sections
- Container - Layout component for containing content
- DatePicker - Allow users to select dates
- DateRangePicker - Allow users to select date ranges
- Divider - Visual separator between content
- Dropdown - Customizable select menu for choosing from a list of options
- DurationDial - Circular dial for displaying time-based durations or progress
- ErrorBoundary - Catch and handle JavaScript errors
- ErrorTrigger - Component to trigger error states for testing
- Grid - Responsive layout grid system
- HelperText - Display supplemental information or instructions for form inputs
- Icon - Display vector icons
- Input - Text input fields
- InputNumber - Numerical input fields
- Label - Text labels for form elements
- List - Display lists of items
- LoadingSpinner - Indicate loading state
- Menu - Hierarchical dropdown navigation
- Message - Display important inline messages with severity levels (info, success, warning, error)
- Modal - Display content in a layer above the page
- MultiSelect - Allow selection of multiple options
- Pill - Display compact, customizable tags for categories, filters, or status indicators
- Popover - Display floating content relative to a trigger element
- Portal - Render content in a different part of the DOM
- ProbabilityInput - Input slider for probability values with color indicators
- ProgressBar - Show progress for operations
- Radio - Allow selection of a single option
- RadioGroup - Group of radio buttons for single selection
- Select - Allow selection from a dropdown list
- ScrollPanel - Provides a scrollable container for content
- Sidebar - Sliding panel for navigation or supplemental content
- Skeleton - Placeholder loading component
- Slider - Allow selection of values from a range
- Snackbar - Show brief notifications
- Spacer - Add consistent spacing between elements
- Stepper - Display a sequence of steps
- Table - Display and organize data in rows and columns
- Tabs - Switch between different content views
- Text - Typography component for text display
- TextArea - Multiline text input
- ThemeToggle - Switch between light and dark themes
- TimePresets - Preset time duration options for selection
- TimelineView - Visual representation of events or tasks along a chronological timeline
- Toast - Display temporary notifications
- Toggle - On/off switch control
- Tooltip - Display additional information on hover
- VirtualList - Efficiently render large lists

## Theming

This UI kit supports theming through styled-components. Wrap your application with the ThemeProvider component to enable theming:

```jsx
import { ThemeProvider } from '@jkeyser/ui-kit';

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

## Documentation

For detailed documentation and component examples, run the Storybook locally:

```bash
npm run storybook
# or
yarn storybook
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT © Jeffrey Keyser