npm package: @onyxon/kit
Description: Reusable UI component library for business applications
Latest version: 2.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Kit UI Library

Reusable UI component library for business applications. Built with Radix UI primitives for accessibility and flexibility.

## Installation

```bash
npm install @onyxon/kit
```

## Setup

### 1. Add CSS variables to your `globals.css`:

```css
@layer base {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --radius: 0.5rem;
  }
}
```

### 2. Add colors to your `tailwind.config.ts`:

```typescript
theme: {
  extend: {
    colors: {
      border: "hsl(var(--border))",
      input: "hsl(var(--input))",
      ring: "hsl(var(--ring))",
      background: "hsl(var(--background))",
      foreground: "hsl(var(--foreground))",
      primary: {
        DEFAULT: "hsl(var(--primary))",
        foreground: "hsl(var(--primary-foreground))",
      },
      secondary: {
        DEFAULT: "hsl(var(--secondary))",
        foreground: "hsl(var(--secondary-foreground))",
      },
      destructive: {
        DEFAULT: "hsl(var(--destructive))",
        foreground: "hsl(var(--destructive-foreground))",
      },
      muted: {
        DEFAULT: "hsl(var(--muted))",
        foreground: "hsl(var(--muted-foreground))",
      },
      accent: {
        DEFAULT: "hsl(var(--accent))",
        foreground: "hsl(var(--accent-foreground))",
      },
      popover: {
        DEFAULT: "hsl(var(--popover))",
        foreground: "hsl(var(--popover-foreground))",
      },
      card: {
        DEFAULT: "hsl(var(--card))",
        foreground: "hsl(var(--card-foreground))",
      },
    },
    borderRadius: {
      lg: "var(--radius)",
      md: "calc(var(--radius) - 2px)",
      sm: "calc(var(--radius) - 4px)",
    },
  },
}
```

### 3. Wrap your application with ToastProvider:

```tsx
import { ToastProvider } from '@onyxon/kit'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ToastProvider>
      {children}
    </ToastProvider>
  )
}
```

## Usage

```tsx
import { Button, Input, DataTable, ConfirmDialog, PageHeader, useToast } from '@onyxon/kit'

function MyComponent() {
  const { addToast } = useToast()
  
  return (
    <div>
      <PageHeader title="My Page" description="Description" />
      <Button onClick={() => addToast({ type: 'success', title: 'Success!' })}>
        Click me
      </Button>
    </div>
  )
}
```

## Components

### UI Components
- **Button** - Versatile button component with multiple variants and sizes
- **Input** - Text input field with validation states
- **Select** - Accessible dropdown select component (Radix UI)
- **Textarea** - Multi-line text input
- **Card** - Container component with header, content, and footer
- **Table** - Data table with header, body, and footer sections
- **Dialog** - Accessible modal dialog component (Radix UI)
- **Label** - Form label component (Radix UI)
- **LoadingSpinner** - Loading indicator with different sizes
- **Toast** - Notification toast system
- **Popover** - Popover component for floating content (Radix UI)
- **Dropdown Menu** - Accessible dropdown menu component (Radix UI)
- **Tooltip** - Tooltip component for additional information (Radix UI)
- **Switch** - Toggle switch component (Radix UI)
- **Checkbox** - Checkbox input component (Radix UI)
- **Tabs** - Tab navigation component (Radix UI)
- **Accordion** - Collapsible accordion component (Radix UI)

### Shared Components
- **DataTable** - Advanced data table with sorting, filtering, and pagination
- **ConfirmDialog** - Confirmation dialog with loading states
- **PageHeader** - Page header with title, description, and actions

## Development

```bash
npm install
npm run dev
```

## Building

```bash
npm run build
```

## Publishing

```bash
npm publish --access public
```

## License

MIT