JSPM

@tokeniar/ui

0.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9
  • Score
    100M100P100Q38356F
  • License MIT

Librería de componentes React del design system de tokeniAr

Package Exports

  • @tokeniar/ui

Readme

@tokeniar/ui

Librería de componentes React del design system oficial de tokeniAr — plataforma de tokenización de activos reales en Argentina.

Instalación

npm install @tokeniar/ui
# o
pnpm add @tokeniar/ui
# o
yarn add @tokeniar/ui

Peer dependencies: React ≥ 17 y react-dom ≥ 17 deben estar instalados en tu proyecto.

Uso rápido

import { Button, Badge, Card, Input, Alert, Navbar, Footer, AssetCard, applyTokens } from "@tokeniar/ui";

// Opcional: inyecta las variables CSS en :root
applyTokens();

function App() {
  return (
    <>
      <Navbar
        links={[
          { label: "inicio",    onClick: () => {} },
          { label: "mercado",   onClick: () => {} },
          { label: "nosotros",  onClick: () => {} },
        ]}
        glass
        onCta={() => console.log("CTA")}
        onLogin={() => console.log("Login")}
      />

      <Card variant="dark" padding="2rem">
        <Badge variant="accent">Nuevo activo</Badge>
        <Button variant="cta" onClick={() => {}}>Invertir</Button>
      </Card>

      <AssetCard
        name="Lote 47 — Palermo"
        type="Inmueble Urbano"
        returnRate="12% anual"
        minInvestment="$500 USD"
        available={34}
        status="active"
        onDetail={() => {}}
      />
    </>
  );
}

Componentes

Componente Props principales
Button variant (cta | login | ghost | outline | danger), size, disabled, fullWidth
Badge variant (default | accent | success | danger | surface)
Card variant (dark | surface | glass), padding
Input label, placeholder, value, onChange, error, hint
Alert type (success | error | warning | info), title, message, onClose
Toggle label, checked, onChange, disabled
Navbar links, glass, logoText, ctaLabel, loginLabel, onCta, onLogin
Footer columns, description, disclaimer, logoText
AssetCard name, type, returnRate, minInvestment, available, status, onDetail

Tokens de diseño

import { tokens } from "@tokeniar/ui";

// Acceso directo a los valores
console.log(tokens.accent.primary); // "#F6B40E"
console.log(tokens.bg.card);        // "#0b0e18"
console.log(tokens.font.heading);   // "'Space Mono', ..."

// O inyectá las variables CSS en :root
import { applyTokens } from "@tokeniar/ui";
applyTokens();
// Ahora podés usar var(--tokeniar-accent), var(--tokeniar-bg-card), etc.

Paleta completa

Token CSS Valor Uso
--tokeniar-bg-main #74ACDF Fondo principal, navbar
--tokeniar-bg-hero #4285F4 Sección hero
--tokeniar-bg-card #0b0e18 Cards y paneles
--tokeniar-bg-surface #111827 Superficies secundarias
--tokeniar-bg-footer #383e42 Footer
--tokeniar-accent #F6B40E Botones CTA, highlights
--tokeniar-accent-hover #f5c95b Estado hover del acento
--tokeniar-text-primary #F5F5F5 Texto sobre fondos oscuros
--tokeniar-text-secondary #383e42 Texto sobre fondos claros
--tokeniar-alert #FF5252 Errores y alertas
--tokeniar-check #1C9A42 Éxito y estados activos

Fuentes

Los componentes usan Space Mono (headings) y Roboto Mono (body). Incluílas en tu proyecto:

<!-- index.html -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet" />

Desarrollo local

git clone https://github.com/tokeniar/ui.git
cd ui
npm install
npm run build      # genera dist/
npm run dev        # watch mode

Licencia

MIT © tokeniAr