Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (uhq-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

uhq-ui

Mini-lib React prête à l'emploi avec des composants simples et élégants:

Button (uhq-btn)
Alert (uhq-alert)
Card (uhq-card)
Input (uhq-input), Select (uhq-select), Textarea (uhq-textarea)
Checkbox (uhq-checkbox), Radio (uhq-radio), Switch (uhq-switch)
Badge (uhq-badge)

Le style est moderne et themable via variables CSS (ex: --primary, --radius).

Installation

npm install uhq-ui
# ou
yarn add uhq-ui

Utilisation

import {
  Button,
  Alert,
  Card,
  Input,
  Select,
  Textarea,
  Checkbox,
  Radio,
  Switch,
  Badge,
} from "uhq-ui";
import "uhq-ui/dist/uhq.css";

export default function App() {
  return (
    <div style={{ padding: 20 }}>
      <Button color="blue-600" textColor="#fff">
        Primary
      </Button>

      <div style={{ height: 12 }} />

      <Input placeholder="Votre email" />

      <div style={{ height: 12 }} />

      <Select>
        <option>Option A</option>
        <option>Option B</option>
      </Select>

      <div style={{ height: 12 }} />

      <Textarea rows={3} placeholder="Votre message" />

      <div style={{ height: 12 }} />

      <Checkbox>J'accepte</Checkbox>
      <div style={{ width: 12, display: "inline-block" }} />
      <Radio name="r1">Choix</Radio>
      <div style={{ width: 12, display: "inline-block" }} />
      <Switch />

      <div style={{ height: 12 }} />

      <Badge color="green-600" textColor="white">
        Nouveau
      </Badge>

      <div style={{ height: 16 }} />

      <Alert title="Attention !" color="amber-500" textColor="gray-900">
        Une alerte simple et lisible.
      </Alert>

      <div style={{ height: 16 }} />

      <Card
        title="Titre"
        subtitle="Sous-titre"
        actions={<Button color="green500">Action</Button>}
      >
        Contenu de la carte.
      </Card>
    </div>
  );
}

Chaque composant accepte className pour surcharger les styles.

Couleurs directes (props)

Vous pouvez fournir des couleurs directement sur les composants (override des variables CSS internes):

Button: color (map --primary), textColor (map --primary-contrast)
Alert: color (map --danger), textColor (map --text)
Card: color (map --surface), textColor (map --text), borderColor (map --muted)

Ces props acceptent:

valeurs CSS (#2563eb, rgb(…), hsl(…), red, transparent, etc.)
tokens façon Tailwind: red500, red-500, blue, green-600, amber400, gray-200…

Exemples tokens

<Button color="red500">Supprimer</Button>
<Button color="green-600" textColor="white">Valider</Button>
<Alert color="red-100" textColor="red-700" title="Erreur">Message</Alert>
<Card color="gray-50" borderColor="gray-200" title="Info">…</Card>

Police par défaut

Une police moderne par défaut est appliquée via --font-sans.

Valeur par défaut: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"
Override global (ex.: Inter):

:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

Thème sombre (opt-in)

Par défaut, le thème est clair. Pour activer le thème sombre, ajoutez l’attribut data-uhq-theme="dark" sur html ou sur un conteneur parent:

<html data-uhq-theme="dark">
  <!-- ... -->
</html>

Thème (variables CSS)

Définissez ces variables au niveau :root (ou dans votre scope) pour changer le thème:

:root {
  --primary: #4f46e5;
  --primary-contrast: #ffffff;
  --danger: #ef4444;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
  --gap: 12px;
}

API des composants

Button
- Props: as (élément/comp, défaut button), className, color?, textColor?, style?, autres props natifs
Alert
- Props: title?, icon?, className, color?, textColor?, style?, autres props div
Card
- Props: title?, subtitle?, actions?, as?, className, color?, textColor?, borderColor?, style?, enfants
Input
- Props: className, color?, textColor?, style?, + props natifs input
Select
- Props: className, color?, textColor?, style?, + props natifs select
Textarea
- Props: className, color?, textColor?, style?, + props natifs textarea
Checkbox
- Props: className, color?, style?, children?, + props natifs input[type=checkbox]
Radio
- Props: className, name?, color?, style?, children?, + props natifs input[type=radio]
Switch
- Props: className, color?, checked?, onChange?, style?
Badge
- Props: className, color?, textColor?, style?, children?

Développement local

npm install
npm run build

Le build génère dist/index.js (ESM) et dist/uhq.css (copie). Esbuild peut aussi émettre dist/index.css via l'import CSS.

Publier sur npm

Connectez-vous à npm

npm login
# email + OTP si 2FA activée

Mettez à jour la version (semver)

npm version patch   # ou minor / major

Build et publication

npm run clean && npm run build
npm publish --access public

Assurez-vous que le nom du package name dans package.json est disponible.

Licence

MIT