@achs/webkit/README.md

Este paquete proporciona un conjunto de componentes de UI para su uso en aplicaciones web de ACHS (Asociación Chilena de Seguridad). Está construido con React, TypeScript y Vite.

# ACHS Webkit UI

Este paquete proporciona un conjunto de componentes de UI para su uso en aplicaciones web de ACHS (Asociación Chilena de Seguridad). Está construido con React, TypeScript y Vite.

## Instalación

```sh
npm install @achs/webkit
# o
pnpm add @achs/webkit
```

## Uso

Aquí tienes un ejemplo de cómo usar un componente del paquete ACHS Webkit UI:

```tsx
import React from 'react';
import { Button } from '@achs/webkit';

const App = () => {
  return (
    <div data-theme="salud">
      <h1>Bienvenido a ACHS Webkit UI</h1>
      <Button>Haz clic aquí</Button>
    </div>
  );
};

export default App;
```

## Desarrollo

Esta plantilla proporciona una configuración mínima para que React funcione en Vite con HMR y algunas reglas de ESLint.

Actualmente, hay dos plugins oficiales disponibles:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) usa [Babel](https://babeljs.io/) para Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) usa [SWC](https://swc.rs/) para Fast Refresh

### sobre manejo de estilos en css respecto al tema
varibles generales desde el tema que se pueden usar en hojas de estillos scss: 
  --primary-color
  --secondary-color
  --complementary-color
  --texto-color
  --light
  --dark
  --disabled-color

por temas de lograr transparencia en shadows y otras propiedades con las variables generales del tema se decidio que las variables de colores ya no estan seteadas con los codigos de colores sin estar pasados por la funcion rgb de css ej: 
  --primary-color: 39, 147, 62;
para usar la variable en las hojas de estilos se debe usar con la funcion de rgb ej:
  background-color: var(--primary-color) ó
  background-color: rgba((var(--secondary-color)), 0.5);



## Ampliando la configuración de ESLint

Si estás desarrollando una aplicación de producción, te recomendamos actualizar la configuración para habilitar reglas de lint con conocimiento de tipos:

```js
export default tseslint.config({
  extends: [
    // Elimina ...tseslint.configs.recommended y reemplázalo con esto
    ...tseslint.configs.recommendedTypeChecked,
    // Alternativamente, usa esto para reglas más estrictas
    ...tseslint.configs.strictTypeChecked,
    // Opcionalmente, agrega esto para reglas estilísticas
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // otras opciones...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```