# @zurich/css-components

<p align="center">
  <a href="https://npmjs.com/package/@zurich/css-components">
    <img
      src="https://img.shields.io/npm/v/@zurich/css-components?style=for-the-badge&color=yellow&label=npm%20version&logo=npm"
      alt="npm package"
    >
  </a>
  &nbsp;
  &nbsp;
  <a href="https://npmjs.com/package/@zurich/css-components">
    <img
      src="https://img.shields.io/npm/dm/@zurich/css-components?style=for-the-badge&color=white&label=npm%20downloads&logo=npm"
      alt="npm downloads"
    >
  </a>
<p>

<p align="center">
  <b>Made for:</b>
</p>

<p align="center">
  <a href="https://reactjs.dev/" target="_blank">
    <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" alt="React"/>
  </a>
  <a href="https://nextjs.org/" target="_blank">
    <img src="https://img.shields.io/badge/Next.js-black?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js"/>
  </a>
  <a href="https://vuejs.org/" target="_blank">
    <img src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D" alt="Vue"/>
  </a>
  <img src="https://img.shields.io/badge/HTML-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML"/>
  <img src="https://img.shields.io/badge/CSS-1572B6?style=for-the-badge&logo=css3&logoColor=fff" alt="CSS"/>
</p>

## About

`@zurich/css-components` provides CSS-only component styles with optional React and Vue helper
components for the Zurich Design System (ZDS). Use this package when you want lightweight,
CSS-based styling without the overhead of Web Components.

### Features

  - **CSS-only styling**: Use custom HTML attributes for component styling
  - **React components**: Pre-built React components with full TypeScript support
  - **Vue components**: Pre-built Vue 3 components
  - **Standalone mode**: No external CDN required (v0.8.0+)
  - **Lightweight**: Smaller bundle than web-components for simpler use cases

## Installation

```bash
npm install @zurich/css-components
```

## Usage

### HTML (CSS-only with attributes)

```html
<!-- Use z-* attributes for styling -->
<button z-button>Click me</button>
<button z-button="secondary">Secondary</button>
<span z-badge="info">New</span>
```

### React

```tsx
import { ReactButton, ReactBadge, ReactCard } from '@zurich/css-components/react';

function App() {
  return (
    <ReactCard header="Welcome">
      <ReactButton onClick={() => alert('Clicked!')}>Click me</ReactButton>
      <ReactBadge config="info">New</ReactBadge>
    </ReactCard>
  );
}
```

### Vue

```vue
<script setup>
import { VueButton, VueBadge, VueCard } from '@zurich/css-components/vue';
</script>

<template>
  <VueCard header="Welcome">
    <VueButton @click="handleClick">Click me</VueButton>
    <VueBadge config="info">New</VueBadge>
  </VueCard>
</template>
```

## Available Components

Components available as CSS classes and React/Vue components:

  - **Atoms**: Button, Badge, Tag, Icon, Link, Image, Loader, etc.
  - **Inputs**: TextInput, Checkbox, Switch, Rating, NumberInput, etc.
  - **Molecules**: Card, Alert, Avatar, Tooltip, Breadcrumbs, etc.
  - **Layouts**: Accordion, Tabs, Table, Modal, Sidebar, etc.
  - **Data**: Charts (Bar, Line, Pie, Donut, etc.), KPI displays

React components use the `React` prefix (e.g., `ReactButton`).
Vue components use the `Vue` prefix (e.g., `VueButton`).

## ZDS Ecosystem

This package is part of the [Zurich Design System (ZDS)](https://www.npmjs.com/search?q=%40zurich%20ZDS):

  - [`@zurich/design-tokens`](https://www.npmjs.com/package/@zurich/design-tokens)
  - [`@zurich/css-components`](https://www.npmjs.com/package/@zurich/css-components)
  - [`@zurich/web-components`](https://www.npmjs.com/package/@zurich/web-components)
  - [`@zurich/angular-components`](https://www.npmjs.com/package/@zurich/angular-components)
  - [`@zurich/dev-utils`](https://www.npmjs.com/package/@zurich/dev-utils)

## License

[![NPM License](https://img.shields.io/npm/l/@zurich/css-components?style=for-the-badge&logo=cachet&logoColor=fff)](http://opensource.org/licenses/ISC)

___

Made with 💙 by Pablo Pérez Chueca and Traian Constantin Dida
for <a href="https://www.zurich.com/" target="_blank">Zurich Insurance Company</a>.