@nomosui/react 0.5.3 → 0.6.0

package/dist/types/components/code/code.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+/**
+ * Le code inline : une surface monospace discrète, posée dans une phrase. Le fond
+ * inset, la bordure et le rayon viennent des tokens du cœur ; la coloration
+ * syntaxique reste à l'app (ADR 0002).
+ */
+export type CodeProps = ComponentProps<'code'>;
+export declare function Code({ className, ...props }: CodeProps): import("react").JSX.Element;

package/dist/types/components/code/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste du Code inline (ADR 0005). Il est écrit à la main : le type se génère,
+ * l'usage s'écrit. Le test de cohérence du catalogue le confronte aux props réelles.
+ */
+export declare const codeManifest: ComponentManifest;

package/dist/types/components/code-block/code-block.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+/**
+ * Le bloc de code : un `<pre><code>` scrollable, avec un bouton de copie. `code` est
+ * le texte brut à copier ; `children` est ce qui s'affiche, ce qui laisse l'app poser
+ * sa propre coloration syntaxique. Les libellés sont injectés : le cœur n'a pas d'i18n
+ * (ADR 0002).
+ */
+export type CodeBlockProps = {
+    /** Le texte brut à copier. Sert aussi de contenu affiché si `children` est absent. */
+    code?: string;
+    /** Le contenu affiché ; permet à l'app de poser sa propre coloration. Défaut : `code`. */
+    children?: ReactNode;
+    /** Le libellé du bouton de copie, injecté par l'app. */
+    copyLabel?: string;
+    /** Le libellé transitoire après copie, injecté par l'app. */
+    copiedLabel?: string;
+    /** Affiche le bouton de copie. Défaut : true. */
+    showCopy?: boolean;
+    /** Les classes de l'appelant, fusionnées après celles du cœur. */
+    className?: string;
+};
+export declare function CodeBlock({ code, children, copyLabel, copiedLabel, showCopy, className, }: CodeBlockProps): import("react").JSX.Element;

package/dist/types/components/code-block/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste du CodeBlock (ADR 0005). Il est écrit à la main : le type se génère,
+ * l'usage s'écrit. Le test de cohérence du catalogue le confronte aux props réelles.
+ */
+export declare const codeBlockManifest: ComponentManifest;

package/dist/types/components/copy-button/copy-button.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+import { type ButtonProps } from '../button/button';
+/**
+ * La config de variantes du CopyButton : celle du Button, réutilisée telle quelle. Le
+ * catalogue la lit pour vérifier que le manifeste ne dérive pas des props réelles
+ * (ADR 0005).
+ */
+export declare const copyButtonVariantsConfig: {
+    variants: {
+        variant: {
+            default: string;
+            destructive: string;
+            outline: string;
+            secondary: string;
+            ghost: string;
+            link: string;
+        };
+        size: {
+            default: string;
+            sm: string;
+            lg: string;
+            icon: string;
+        };
+    };
+    defaultVariants: {
+        variant: "default";
+        size: "default";
+    };
+};
+export type CopyButtonProps = {
+    /** Le texte à copier dans le presse-papiers (`navigator.clipboard.writeText`). */
+    value: string;
+    /** Le libellé au repos. Défaut neutre, l'app peut le traduire. */
+    label?: string;
+    /** Le libellé transitoire après copie. Défaut neutre, l'app peut le traduire. */
+    copiedLabel?: string;
+    /** Une icône fournie par l'appelant : le cœur n'expose pas d'icônes. */
+    icon?: ReactNode;
+    /** Le ton, repris du Button. */
+    variant?: ButtonProps['variant'];
+    /** La densité, reprise du Button. */
+    size?: ButtonProps['size'];
+    /** Les classes de l'appelant, fusionnées après celles du cœur. */
+    className?: string;
+};
+/**
+ * Le bouton de copie : il écrit `value` dans le presse-papiers et affiche un libellé
+ * transitoire. Copier du texte arbitraire n'est pas un souci d'app (ADR 0002) ; les
+ * libellés et l'icône sont injectés, le cœur n'a pas d'i18n.
+ */
+export declare function CopyButton({ value, label, copiedLabel, icon, variant, size, className, }: CopyButtonProps): import("react").JSX.Element;

package/dist/types/components/copy-button/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste du CopyButton (ADR 0005). Il reprend les deux groupes de variantes du
+ * Button — `variant` et `size` — que le test de cohérence confronte à la config réelle.
+ */
+export declare const copyButtonManifest: ComponentManifest;

package/dist/types/components/footer/footer.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * Le pied de page : une marque, une rangée de liens, une ligne légale. Même frontière
+ * que la barre de navigation (ADR 0015) — des emplacements injectés, aucun routing, aucun
+ * libellé propre au cœur (ADR 0002). L'app fournit le wordmark, les liens et le texte légal.
+ */
+export type FooterProps = {
+    /** Le wordmark ou le logo, fourni par l'appelant. */
+    brand?: ReactNode;
+    /** La rangée de liens, fournie par l'appelant (des `Link`, par exemple). */
+    links?: ReactNode;
+    /** La ligne légale (copyright, mentions), fournie par l'appelant. */
+    legal?: ReactNode;
+    /** Les classes de l'appelant, fusionnées après celles du cœur. */
+    className?: string;
+};
+export declare function Footer({ brand, links, legal, className }: FooterProps): import("react").JSX.Element;

package/dist/types/components/footer/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste du pied de page (ADR 0005, ADR 0015). Un bloc du cœur : la mise en page
+ * est au cœur, les emplacements (marque, liens, ligne légale) sont injectés par l'app.
+ */
+export declare const footerManifest: ComponentManifest;

package/dist/types/components/heading/heading.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * La config des variantes est exportée à côté de `headingVariants` : le catalogue la lit
+ * pour vérifier que le manifeste ne dérive pas des props réelles (ADR 0005).
+ *
+ * `level` porte à la fois la balise (`h1`..`h6`) et la taille sémantique : un seul mot dit
+ * la hiérarchie, et la taille suit l'échelle des tokens (ADR 0004). Les valeurs sont des
+ * chaînes parce que cva indexe ses variantes par nom.
+ */
+export declare const headingVariantsConfig: {
+    variants: {
+        level: {
+            '1': string;
+            '2': string;
+            '3': string;
+            '4': string;
+            '5': string;
+            '6': string;
+        };
+    };
+    defaultVariants: {
+        level: "2";
+    };
+};
+export declare const headingVariants: (props?: ({
+    level?: "1" | "2" | "3" | "4" | "5" | "6" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & Omit<VariantProps<typeof headingVariants>, 'level'> & {
+    /** Le niveau hiérarchique : il choisit la balise `h1`..`h6` et la taille sémantique. */
+    level?: HeadingLevel;
+};
+/**
+ * Le titre : la balise suit le niveau (`h1`..`h6`), la taille suit l'échelle sémantique.
+ * Présentation seule — le texte vient de l'appelant.
+ */
+export declare const Heading: ({ level, className, ...props }: HeadingProps) => import("react").JSX.Element;

package/dist/types/components/heading/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste du Titre (ADR 0005). `level` est la seule variante : elle choisit à la fois
+ * la balise (`h1`..`h6`) et la taille sémantique, pour qu'un seul mot dise la hiérarchie.
+ */
+export declare const headingManifest: ComponentManifest;

package/dist/types/components/kicker/kicker.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * La config des variantes est exportée à côté de `kickerVariants` : le catalogue la lit
+ * pour vérifier que le manifeste ne dérive pas des props réelles (ADR 0005). Le ton pose
+ * la couleur du point dans une variable, que le point lit — le libellé reste discret.
+ */
+export declare const kickerVariantsConfig: {
+    variants: {
+        tone: Record<"neutral" | "info" | "progress" | "attention" | "warning" | "danger" | "success", string>;
+    };
+    defaultVariants: {
+        tone: "neutral";
+    };
+};
+export declare const kickerVariants: (props?: ({
+    tone?: "neutral" | "info" | "progress" | "attention" | "warning" | "danger" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type KickerProps = VariantProps<typeof kickerVariants> & {
+    /** Le libellé d'accroche : court, jamais une phrase. */
+    children: ReactNode;
+    /** Affiche un point de ton devant le libellé. */
+    dot?: boolean;
+    /** Les classes de l'appelant, fusionnées après celles du cœur. */
+    className?: string;
+};
+/**
+ * Le kicker : une étiquette d'accroche, répétée au-dessus d'un titre. Présentation seule —
+ * le texte est injecté par l'appelant (le cœur n'a pas d'i18n), le ton est une intention.
+ */
+export declare function Kicker({ tone, dot, children, className }: KickerProps): import("react").JSX.Element;

package/dist/types/components/kicker/manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/** Le manifeste du kicker (ADR 0005). Le ton réutilise le vocabulaire du cœur. */
+export declare const kickerManifest: ComponentManifest;

package/dist/types/components/link/link.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+/**
+ * Le lien texte du cœur. Il rend un `<a>` — pas un `<button>` comme `Button variant="link"`.
+ * `href` et le libellé sont injectés : le cœur ne connaît aucun routing (ADR 0002).
+ */
+export type LinkProps = ComponentProps<'a'> & {
+    /** Rend le style sur l'enfant au lieu d'un `<a>` (Radix `Slot`). */
+    asChild?: boolean;
+};
+export declare function Link({ className, asChild, ...props }: LinkProps): import("react").JSX.Element;

package/dist/types/components/link/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste du Lien (ADR 0005). Il est écrit à la main : le type se génère,
+ * l'usage s'écrit. Le test de cohérence du catalogue le confronte aux props réelles.
+ */
+export declare const linkManifest: ComponentManifest;

package/dist/types/components/navbar/manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/** Le manifeste de la barre supérieure (ADR 0005, 0030). Slots injectés, aucun routing. */
+export declare const navbarManifest: ComponentManifest;

package/dist/types/components/navbar/navbar.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * La barre supérieure d'un site : une marque, des emplacements de navigation et un
+ * groupe d'actions en fin. Sticky en haut, bordure basse, fond du cœur. Les slots sont
+ * injectés — le cœur ne porte ni routing ni mot produit (ADR 0002, 0030).
+ */
+export type NavbarProps = {
+    /** La marque : un wordmark, un logo, un badge de version. */
+    brand?: ReactNode;
+    /** Les emplacements de navigation, fournis par l'appelant. */
+    nav?: ReactNode;
+    /** Le groupe d'actions de fin : boutons, menu, avatar. */
+    actions?: ReactNode;
+    /** Les classes de l'appelant, fusionnées après celles du cœur. */
+    className?: string;
+};
+export declare function Navbar({ brand, nav, actions, className }: NavbarProps): import("react").JSX.Element;

package/dist/types/components/text/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste du Texte (ADR 0005). `size` lit l'échelle typographique sémantique ; `as`
+ * choisit l'élément rendu (paragraphe ou `span` inline).
+ */
+export declare const textManifest: ComponentManifest;

package/dist/types/components/text/text.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * La config des variantes est exportée à côté de `textVariants` : le catalogue la lit pour
+ * vérifier que le manifeste ne dérive pas des props réelles (ADR 0005).
+ *
+ * `size` lit l'échelle typographique sémantique (ADR 0004) : `text-body`, `text-lead`…
+ * portent la taille **et** l'interligne des tokens.
+ */
+export declare const textVariantsConfig: {
+    variants: {
+        size: {
+            lead: string;
+            body: string;
+            caption: string;
+            micro: string;
+        };
+    };
+    defaultVariants: {
+        size: "body";
+    };
+};
+export declare const textVariants: (props?: ({
+    size?: "body" | "caption" | "lead" | "micro" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TextProps = HTMLAttributes<HTMLElement> & VariantProps<typeof textVariants> & {
+    /** L'élément rendu : un paragraphe par défaut, un `span` pour un texte inline. */
+    as?: 'p' | 'span';
+};
+/**
+ * Le texte courant : un paragraphe ou un `span`, à la taille sémantique choisie.
+ * Présentation seule — le contenu vient de l'appelant.
+ */
+export declare const Text: ({ size, as: Tag, className, ...props }: TextProps) => import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -27,6 +27,12 @@ export { badgeManifest } from './components/badge/manifest';
 export { Button, buttonVariants, buttonVariantsConfig } from './components/button/button';
 export type { ButtonProps } from './components/button/button';
 export { buttonManifest } from './components/button/manifest';
+export { Heading, headingVariants, headingVariantsConfig } from './components/heading/heading';
+export type { HeadingLevel, HeadingProps } from './components/heading/heading';
+export { headingManifest } from './components/heading/manifest';
+export { Text, textVariants, textVariantsConfig } from './components/text/text';
+export type { TextProps } from './components/text/text';
+export { textManifest } from './components/text/manifest';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from './components/card/card';
 export { cardManifest } from './components/card/manifest';
 export { Dialog } from './components/dialog/dialog';
@@ -40,6 +46,18 @@ export { emptyStateManifest } from './components/empty-state/manifest';
 export { Chip } from './components/chip/chip';
 export type { ChipProps } from './components/chip/chip';
 export { chipManifest } from './components/chip/manifest';
+export { Kicker, kickerVariantsConfig } from './components/kicker/kicker';
+export type { KickerProps } from './components/kicker/kicker';
+export { kickerManifest } from './components/kicker/manifest';
+export { CopyButton, copyButtonVariantsConfig } from './components/copy-button/copy-button';
+export type { CopyButtonProps } from './components/copy-button/copy-button';
+export { copyButtonManifest } from './components/copy-button/manifest';
+export { Code } from './components/code/code';
+export type { CodeProps } from './components/code/code';
+export { codeManifest } from './components/code/manifest';
+export { CodeBlock } from './components/code-block/code-block';
+export type { CodeBlockProps } from './components/code-block/code-block';
+export { codeBlockManifest } from './components/code-block/manifest';
 export { Freshness } from './components/freshness/freshness';
 export type { FreshnessProps } from './components/freshness/freshness';
 export { freshnessManifest } from './components/freshness/manifest';
@@ -54,6 +72,15 @@ export type { SearchFieldProps } from './components/search-field/search-field';
 export { searchFieldManifest } from './components/search-field/manifest';
 export { Label } from './components/label/label';
 export { labelManifest } from './components/label/manifest';
+export { Link } from './components/link/link';
+export type { LinkProps } from './components/link/link';
+export { linkManifest } from './components/link/manifest';
+export { Navbar } from './components/navbar/navbar';
+export type { NavbarProps } from './components/navbar/navbar';
+export { navbarManifest } from './components/navbar/manifest';
+export { Footer } from './components/footer/footer';
+export type { FooterProps } from './components/footer/footer';
+export { footerManifest } from './components/footer/manifest';
 export { Fieldset } from './components/fieldset/fieldset';
 export { fieldsetManifest } from './components/fieldset/manifest';
 export { Field } from './components/field/field';
@@ -129,6 +156,7 @@ export type { ComponentManifest, ComponentProp, ComponentUsage, ComponentVariant
 export { cn } from './lib/cn';
 export { TONES, toneClasses } from './lib/tone';
 export type { Tone } from './lib/tone';
+export type { LucideIcon } from 'lucide-react';
 export { resolveSkin } from './tokens/skin';
 export { renderCss } from './tokens/build.mjs';
 export type { TokensDocument } from './tokens/build.mjs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nomosui/react",
   "private": false,
-  "version": "0.5.3",
+  "version": "0.6.0",
   "type": "module",
   "description": "An app-agnostic design system, built in public: a core of tokens and components exposed to humans and agents.",
   "repository": {

package/tokens/theme.css

@@ -74,6 +74,30 @@
   --radius-lg: var(--nomos-radius-control);
   --radius-md: var(--nomos-radius-field);
   --radius-sm: var(--nomos-radius-chip);
+
+  /*
+    L'échelle typographique sémantique (ADR 0004) : `text-body`, `text-title`… lisent la
+    taille **et** l'interligne des tokens, `font-strong` lit le poids. Aucune valeur n'est
+    écrite ici — un skin change les valeurs, jamais ces noms.
+  */
+  --text-micro: var(--nomos-type-size-micro);
+  --text-micro--line-height: var(--nomos-type-leading-micro);
+  --text-caption: var(--nomos-type-size-caption);
+  --text-caption--line-height: var(--nomos-type-leading-caption);
+  --text-body: var(--nomos-type-size-body);
+  --text-body--line-height: var(--nomos-type-leading-body);
+  --text-lead: var(--nomos-type-size-lead);
+  --text-lead--line-height: var(--nomos-type-leading-lead);
+  --text-title: var(--nomos-type-size-title);
+  --text-title--line-height: var(--nomos-type-leading-title);
+  --text-display: var(--nomos-type-size-display);
+  --text-display--line-height: var(--nomos-type-leading-display);
+
+  --font-weight-regular: var(--nomos-type-weight-regular);
+  --font-weight-medium: var(--nomos-type-weight-medium);
+  --font-weight-strong: var(--nomos-type-weight-strong);
+
+  --font-sans: var(--nomos-type-family-sans);
 }
 
 /*