@hitsokeyco/ozenpick v0.1.14

Ozenpick UI

Una biblioteca de componentes React moderna y personalizable.

Instalación

npm install @hitsokeyco/ozenpick

Uso

import React from 'react';
import { Button, Input, ThemeProvider, useTheme } from '@hitsokeyco/ozenpick';
import '@hitsokeyco/ozenpick/style.css';

function App() {
  return (
    <ThemeProvider>
      <MyComponents />
    </ThemeProvider>
  );
}

function MyComponents() {
  const { toggleTheme } = useTheme();
  const [text, setText] = useState('');

  return (
    <div>
      <Button 
        label="Cambiar tema" 
        onClick={toggleTheme}
        variant="primary"
      />
      
      <Input 
        label="Nombre"
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
}

Componentes

Button

<Button 
  label="Click me"
  onClick={() => console.log('clicked')}
  variant="primary" // 'primary' | 'secondary' | 'success' | 'danger'
  size="medium"    // 'small' | 'medium' | 'large'
  disabled={false}
  type="button"
/>

Input

<Input 
  label="Nombre"
  type="text"      // 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'radio' | 'file'
  value={value}
  onChange={(e) => setValue(e.target.value)}
  error={false}
  helperText="Mensaje de ayuda"
  disabled={false}
/>

Tema

ThemeProvider

Envuelve tu aplicación con el ThemeProvider para habilitar el cambio de tema:

<ThemeProvider>
  <App />
</ThemeProvider>

useTheme Hook

Usa el hook useTheme para acceder a las funciones del tema:

const { mode, theme, toggleTheme } = useTheme();

Estilos

Importa los estilos en tu aplicación:

import '@hitsokeyco/ozenpick/style.css';

Contribuir

1. Fork el repositorio
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

Licencia

MIT