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

Propiedad	Tipo	Descripción
variant	'contained' | 'outlined'	Variante del botón: relleno (contained) o borde (outlined)
children	React.ReactNode	Contenido interno del botón (texto, íconos, etc.)
icon	React.ReactNode	Ícono al inicio del botón (opcional)
endIcon	React.ReactNode	Ícono al final del botón (opcional)
color	'primary' | 'secondary' | 'error' | 'gray' | 'info' | 'white'	Color del botón, según el tema del sistema
extraPadding	boolean	Agrega un padding extra al botón (opcional)
full	boolean	Hace que el botón ocupe el ancho completo del contenedor
loading	boolean	Muestra un indicador de carga dentro del botón
roundedFull	boolean	Estilo con bordes completamente redondeados
size	'normal' | 'small' | 'large' | 'medium'	Tamaño del botón
centerText	boolean	Centra el texto del botón
shadowDisabled	boolean	Desactiva la sombra del botón (opcional)
style	React.CSSProperties	Estilos personalizados aplicados al botón
onClick	function	Función a ejecutar al hacer clic
type	'button' | 'submit' | 'reset'	Tipo del botón HTML
disabled	boolean	Desactiva el botón

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

Propiedad	Tipo	Descripción
variant	'normal'	Variante visual del input
disabled	boolean	Desactiva la entrada, impidiendo interacción
fullWidth	boolean	Ajusta el ancho del input al 100% del contenedor
endIcon	ReactElement	Ícono al final del input (opcional)
isInvalid	boolean	Marca el input como inválido
isError	boolean	Marca el input con un estado de error
error	string	Mensaje de error mostrado debajo del input
label	string	Etiqueta asociada al input
placeholder	string	Texto de marcador dentro del input
hint	string	Mensaje de ayuda mostrado debajo del input
actionEndIcon	ReactElement	Ícono de acción al final del input
onClickEndIcon	function	Acción ejecutada al hacer clic en endIcon
onActionEndIcon	function	Acción ejecutada al interactuar con actionEndIcon
showIconAction	boolean	Muestra o no el actionEndIcon
width	string	Ancho personalizado del input
padding	string	Espaciado interno del input
onChange	(e: ChangeEvent<HTMLInputElement>) => void	Función ejecutada al cambiar el valor
type	string	Tipo de entrada HTML

Props Específicas

LetterInput

Propiedad	Tipo	Descripción
allowSpaces	boolean	Permite espacios en el input

NumberInput

Propiedad	Tipo	Descripción
decimal	boolean	Permite números decimales

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

Propiedad	Tipo	Descripción
children	React.ReactNode	Contenido interno de la tarjeta
className	string	Clase CSS personalizada
padding	'none' | 'small' | 'normal' | 'large'	Tamaño del padding interno
center	boolean	Centra el contenido
onClick	function	Acción al hacer clic
bordered	boolean	Agrega un borde visible

Ejemplo

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

4. Alert

Mensajes informativos con diferentes estilos.

Props

Propiedad	Tipo	Descripción
type	'info' | 'error' | 'success' | 'warning'	Tipo de alerta
message	string	Mensaje de la alerta

Ejemplo

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

5. Checkbox y Radio

Props de Radio

Propiedad	Tipo	Descripción
label	string | ReactElement	Etiqueta del radio button
full	boolean	Ocupa todo el ancho disponible
centerRadio	boolean	Centra el radio button
hideRadio	boolean	Oculta el radio button
hint	string	Texto adicional
color	'primary' | 'secondary'	Color del radio button

Props de Checkbox

Propiedad	Tipo	Descripción
label	string | ReactElement	Etiqueta del checkbox
full	boolean	Ocupa todo el ancho disponible
centerCheckbox	boolean	Centra el checkbox
hideCheckbox	boolean	Oculta el checkbox
hint	string	Texto adicional
endIcon	ReactElement	Icono al final
color	'primary' | 'secondary'	Color del 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

Propiedad	Tipo	Descripción
label	string	Descripción del mensaje de carga

Ejemplo

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

7. DropdownSelector

Props

Propiedad	Tipo	Descripción
options	Array<{ value: string, label: string }>	Lista de opciones disponibles
formGroupWidth	string	Ancho personalizado del contenedor
selectedOption	{ value: string, label: string }	Opción seleccionada
setSelectedOption	function	Función para actualizar selección
labelText	string	Etiqueta del dropdown
hintText	string	Mensaje de ayuda
emptyMessage	string	Mensaje cuando no hay opciones
isDisabled	boolean	Desactiva el dropdown
isError	boolean	Indica estado de error

8. Header

Props

Propiedad	Tipo	Descripción
logo	JSX.Element	Logo del encabezado
navLinks	JSX.Element	Enlaces de navegación

Ejemplo

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

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