npm package: @supertst/ds
Description: Supertest design system — React components + design tokens for Tailwind v4.
Latest version: 0.11.0

# @supertst/ds

Supertest design system — React components + design tokens for Tailwind v4.

## Install

```bash
npm install @supertst/ds
```

## CSS Setup

Add to your `globals.css`:

```css
@import "@supertst/ds/styles";
```

## Usage

```tsx
import { Button } from "@supertst/ds"

export function MyPage() {
  return <Button variant="default">Comenzar simulacro</Button>
}
```

## Brand-Aware Components

Several DS components change visuals by brand, including `BrandLogo`, `SidebarApp`, `DialogRegisterStudent`, `EstadisticaEstudiante`, `SubjectSelector`, `SubjectPill`, and `SubjectSplashScreen`.

In Next App Router, add the brand bootstrap script to your root layout:

```tsx
import { BrandScript } from "@supertst/ds"

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="es" data-brand="colegios" suppressHydrationWarning>
      <head>
        <BrandScript defaultBrand="colegios" />
      </head>
      <body>{children}</body>
    </html>
  )
}
```

If you need to switch brands at runtime, use `setBrand("colegios")` or `setBrand("universidades")`.

## Next App Router

In Next App Router, `@supertst/ds` resolves to the server-safe bundle when it is imported from a Server Component through the `react-server` export condition.

`@supertst/ds/client` is the explicit client entry for interactive primitives such as `Dialog`, `Sheet`, `Popover`, and other `"use client"` components. Import that entry only from your own client modules.

Server component:

```tsx
import { Button, Card } from "@supertst/ds"
import { DetailsDialog } from "./details-dialog"

export default function Page() {
  return (
    <Card className="p-6">
      <DetailsDialog
        trigger={<Button variant="outline">Ver detalles</Button>}
      />
    </Card>
  )
}
```

Client wrapper:

```tsx
"use client"

import type { ReactNode } from "react"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@supertst/ds/client"

export function DetailsDialog({ trigger }: { trigger: ReactNode }) {
  return (
    <Dialog>
      <DialogTrigger asChild>{trigger}</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Detalles</DialogTitle>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  )
}
```

## Fonts

The DS uses **SF Pro Rounded** (macOS/iOS native) with **Nunito** as the web fallback. The package now degrades safely to `"Nunito"` if the font variable is missing, but to match the DS source of truth you should still load Nunito via `next/font`:

```tsx
import { Nunito } from "next/font/google"

const nunito = Nunito({
  subsets: ["latin"],
  variable: "--font-nunito",
  weight: ["400", "500", "600", "700", "800"],
  display: "swap",
})

// Add nunito.variable to your html className
```

SF Pro Rounded loads automatically on Apple devices. No extra setup needed.

## Tailwind v4

This package requires Tailwind CSS v4. The CSS tokens use `@theme inline` which requires v4. Make sure your project has `tailwindcss@^4` installed and configured.