musa-design-system v2.0.4

Instalación

 import 'musa-design-system/dist/index.cjs.css';
 import {
  Alert,
  ContainedButton,
  DropdownSelector,
  LetterInput,
  OutlinedButton,
  PasswordInput,
} from "musa-design-system";;

Componentes Documentados

1. Buttons

Botones reutilizables con diferentes estilos y variantes.

Variantes:

• Outline: Botón con borde visible.
• Solid: Botón con fondo sólido.
• Gosh: Estilo de botón con efecto especial.
• Button Icon: Botón que incluye un ícono y es rounded-full.

Props

Ejemplo

  <OutlinedButton color="primary">Hola</OutlinedButton>
  <ContainedButton color="primary">Hola</ContainedButton>

2. Input

Campos de entrada de texto con múltiples variantes y funcionalidad avanzada.

Tipos de Inputs

1. LetterInput: Entrada restringida a letras (con opción para permitir espacios).
2. NumberInput: Entrada restringida a números (con soporte opcional para decimales).
3. PasswordInput: Entrada para contraseñas.

Props Generales

Props Específicas

LetterInput

NumberInput

Ejemplo de Uso

// Entrada de solo letras
<LetterInput
  label="Solo letras"
  placeholder="Ej. ABC"
  allowSpaces
/>

// Entrada de números
<NumberInput
  label="Edad"
  placeholder="Ej. 25"
  decimal={false}
/>

3. Card

Componente para contener contenido con sombra, bordes redondeados y tamaños configurables.

Props

Ejemplo

<Card center bordered padding="large">
  Este es un card con sombra y bordes redondeados.
</Card>

4. Alert

Mensajes informativos con diferentes estilos.

Props

Ejemplo

<Alert type="success" message="Operación exitosa." />
<Alert type="error" message="Ha ocurrido un error." />

5. Checkbox y Radio

Props de Radio

Props de Checkbox

Ejemplo

    <Checkbox label="Acepto los términos y condiciones" />
    <div className="flex flex-col gap-4">
      <Radio
        label="Option 1"
        name="radioGroup"
        value="option1"
        checked={selected === 'option1'}
        onChange={() => setSelected('option1')}
        color='primary'
      />
      <Radio
        label="Option 2"
        name="radioGroup"
        value="option2"
        checked={selected === 'option2'}
        onChange={() => setSelected('option2')}
        color='secondary'
      />
    </div>

6. Loader

Props

Ejemplo

<Loader label="Cargando componentes..." />

7. DropdownSelector

Props

8. Header

Props

Ejemplo

const navLinks = (
  <>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </>
);

<Header logo={<FaReact />} navLinks={navLinks} />;