@wakastellar/ui 4.0.0 → 4.0.1

package/dist/utils/theme-loader.es.js

@@ -0,0 +1,124 @@
+"use client";
+import * as e from "react";
+//#region src/utils/theme-loader.ts
+var t = class {
+	constructor(e) {
+		this.loadedThemes = /* @__PURE__ */ new Set(), this.styleElements = /* @__PURE__ */ new Map(), this.config = {
+			baseUrl: e.baseUrl,
+			cache: e.cache ?? !0,
+			timeout: e.timeout ?? 1e4,
+			onError: e.onError ?? ((e) => console.error("Theme loading error:", e)),
+			onSuccess: e.onSuccess ?? (() => {})
+		};
+	}
+	async loadTheme(e) {
+		if (this.config.cache && this.loadedThemes.has(e)) {
+			console.log(`Theme "${e}" already loaded from cache`), this.applyTheme(e);
+			return;
+		}
+		try {
+			let t = new AbortController(), n = setTimeout(() => t.abort(), this.config.timeout), r = this.buildThemeUrl(e);
+			console.log(`Loading theme from: ${r}`);
+			let i = await fetch(r, {
+				signal: t.signal,
+				headers: { Accept: "text/css" }
+			});
+			if (clearTimeout(n), !i.ok) throw Error(`Failed to load theme: ${i.status} ${i.statusText}`);
+			let a = await i.text();
+			if (!a.includes(`[data-theme="${e}"]`)) throw Error(`Invalid theme CSS: missing [data-theme="${e}"] selector`);
+			this.injectThemeStyles(e, a), this.loadedThemes.add(e), this.applyTheme(e), this.config.onSuccess(e);
+		} catch (t) {
+			let n = t instanceof Error ? t : Error(String(t));
+			throw this.config.onError(n, e), n;
+		}
+	}
+	applyTheme(e) {
+		if (!(typeof document > "u")) {
+			document.documentElement.setAttribute("data-theme", e);
+			try {
+				localStorage.setItem("theme", e);
+			} catch (e) {
+				console.warn("Could not save theme to localStorage:", e);
+			}
+			console.log(`Applied theme: ${e}`);
+		}
+	}
+	getCurrentTheme() {
+		return typeof document > "u" ? null : document.documentElement.getAttribute("data-theme");
+	}
+	loadSavedTheme() {
+		if (typeof window > "u") return null;
+		try {
+			return localStorage.getItem("theme");
+		} catch (e) {
+			return console.warn("Could not load theme from localStorage:", e), null;
+		}
+	}
+	async preloadThemes(e) {
+		console.log(`Preloading ${e.length} themes...`), await Promise.allSettled(e.map((e) => this.loadTheme(e))), console.log(`Preloaded ${this.loadedThemes.size} themes`);
+	}
+	unloadTheme(e) {
+		let t = this.styleElements.get(e);
+		t && (t.remove(), this.styleElements.delete(e)), this.loadedThemes.delete(e), console.log(`Unloaded theme: ${e}`);
+	}
+	clearCache() {
+		this.styleElements.forEach((e) => e.remove()), this.styleElements.clear(), this.loadedThemes.clear(), console.log("Theme cache cleared");
+	}
+	getLoadedThemes() {
+		return Array.from(this.loadedThemes);
+	}
+	buildThemeUrl(e) {
+		return `${this.config.baseUrl.replace(/\/$/, "")}/${e}.css`;
+	}
+	injectThemeStyles(e, t) {
+		if (typeof document > "u") return;
+		let n = this.styleElements.get(e);
+		n && n.remove();
+		let r = document.createElement("style");
+		r.setAttribute("data-theme-name", e), r.textContent = t, document.head.appendChild(r), this.styleElements.set(e, r);
+	}
+}, n = null;
+function r(e) {
+	return n = new t(e), n;
+}
+function i() {
+	if (!n) throw Error("ThemeLoader not initialized. Call initThemeLoader() first.");
+	return n;
+}
+async function a(e) {
+	return i().loadTheme(e);
+}
+function o(e) {
+	i().applyTheme(e);
+}
+function s(r) {
+	if (typeof window > "u") return {
+		loadTheme: async () => {},
+		applyTheme: () => {},
+		currentTheme: null,
+		loadedThemes: [],
+		isLoading: !1
+	};
+	let i = n || new t({
+		baseUrl: r?.baseUrl || "/themes",
+		...r
+	}), [a, o] = e.useState(!1), [s, c] = e.useState(i.getCurrentTheme());
+	return {
+		loadTheme: async (e) => {
+			o(!0);
+			try {
+				await i.loadTheme(e), c(e);
+			} finally {
+				o(!1);
+			}
+		},
+		applyTheme: (e) => {
+			i.applyTheme(e), c(e);
+		},
+		currentTheme: s,
+		loadedThemes: i.getLoadedThemes(),
+		isLoading: a
+	};
+}
+//#endregion
+export { t as ThemeLoader, o as applyTheme, i as getThemeLoader, r as initThemeLoader, a as loadTheme, s as useThemeLoader };

package/dist/utils/tweak.cjs.js

@@ -0,0 +1 @@
+"use client";require(`../_virtual/_rolldown/runtime.cjs.js`);let e=require(`clsx`),t=require(`tailwind-merge`),n=require(`class-variance-authority`);function r(...n){return(0,t.twMerge)((0,e.clsx)(...n))}r.variants=function(e){let t={variants:e.variants??{},defaultVariants:e.defaultVariants},i=(0,n.cva)(e.base??``,t);return e=>{let{class:t,className:n,...a}=e??{};return r(i(a),t,n)}},exports.tweak=r;

package/dist/{cn-Bpd_xIzI.mjs → utils/tweak.es.js}

@@ -17,7 +17,4 @@ r.variants = function(e) {
 	};
 };
 //#endregion
-//#region src/utils/cn.ts
-var i = (...e) => r(e);
-//#endregion
-export { r as n, i as t };
+export { r as tweak };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wakastellar/ui",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Zero-config UI Library for Next.js with TweakCN theming and i18n support",
   "keywords": [
     "ui",
@@ -57,7 +57,22 @@
     "./styles/v4": "./src/styles/globals.css",
     "./styles/base": "./src/styles/base.css",
     "./tailwind-preset": "./src/styles/tailwind.preset.js",
-    "./styles/*": "./src/styles/*.css"
+    "./styles/*": "./src/styles/*.css",
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.es.js",
+      "require": "./dist/components/*/index.cjs.js"
+    },
+    "./blocks/*": {
+      "types": "./dist/blocks/*/index.d.ts",
+      "import": "./dist/blocks/*/index.es.js",
+      "require": "./dist/blocks/*/index.cjs.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.es.js",
+      "require": "./dist/hooks/*.cjs.js"
+    }
   },
   "files": [
     "dist",
@@ -95,6 +110,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.23",
@@ -104,16 +120,17 @@
     "cmdk": "^1.1.1",
     "commander": "^14.0.3",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.4.0",
     "i18next": "^26.0.3",
     "lucide-react": "^1.7.0",
-    "next-i18next": "^16.0.5",
     "prismjs": "^1.30.0",
     "prompts": "^2.4.2",
     "react-datepicker": "^9.1.0",
     "react-day-picker": "^9.14.0",
+    "react-easy-crop": "^5.5.0",
     "react-i18next": "^17.0.2",
-    "tailwind-merge": "^3.5.0",
-    "tailwind-variants": "^3.2.2"
+    "react-resizable-panels": "^4.11.2",
+    "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
     "@platejs/ai": ">=52.0.0",
@@ -308,9 +325,9 @@
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/browser": "^4.1.2",
-    "@vitest/coverage-v8": "^4.1.2",
-    "@vitest/ui": "^4.1.2",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
+    "@vitest/ui": "^4.1.8",
     "autoprefixer": "^10.4.27",
     "bundlemon": "^3.1.0",
     "esbuild": "^0.27.4",
@@ -324,7 +341,7 @@
     "knip": "^6.6.1",
     "platejs": "^53.0.3",
     "playwright": "^1.59.0",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.15",
     "react-hook-form": "^7.72.0",
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
@@ -340,9 +357,28 @@
     "typescript-eslint": "^8.59.1",
     "vite": "^8.0.5",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.2",
+    "vitest": "^4.1.8",
     "vitest-axe": "^0.1.0"
   },
+  "overrides": {
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.5",
+    "jspdf": ">=4.2.1",
+    "next": ">=16.2.6",
+    "diff": ">=8.0.3",
+    "lodash": ">=4.18.0",
+    "lodash-es": ">=4.18.0",
+    "@isaacs/brace-expansion": ">=5.0.6",
+    "picomatch": ">=4.0.2",
+    "path-to-regexp": ">=8.4.0",
+    "handlebars": ">=4.7.9",
+    "serialize-javascript": ">=7.0.5",
+    "dompurify": ">=3.4.0",
+    "rollup": ">=4.59.0",
+    "markdown-it": ">=14.1.1",
+    "vite": ">=8.0.5",
+    "postcss": ">=8.5.10"
+  },
   "scripts": {
     "dev": "vite build --watch --mode development",
     "build": "vite build && pnpm build:types && pnpm build:cli",
@@ -368,6 +404,8 @@
     "audit:size-limit": "size-limit --json > audit/output/size-limit.json",
     "audit:all": "mkdir -p audit/output && pnpm audit:coverage && pnpm audit:bundle && pnpm audit:a11y && pnpm audit:typescript && pnpm audit:dead-code && pnpm audit:size-limit",
     "build:packages": "pnpm -r --filter './packages/*' build",
-    "type-check:packages": "pnpm -r --filter './packages/*' type-check"
+    "type-check:packages": "pnpm -r --filter './packages/*' type-check",
+    "registry:generate": "node scripts/generate-registry.mjs",
+    "registry:check": "node scripts/generate-registry.mjs --check"
   }
 }

package/src/blocks/_shared/identity/InviteUserPanel.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "../../../components/button"
+import { Label } from "../../../components/label"
+import { Textarea } from "../../../components/textarea"
+import { RoleSelect } from './RoleSelect'
+import type { InvitePayload, RoleDefinition } from './types'
+
+export interface InviteUserPanelProps {
+  roles: RoleDefinition[]
+  defaultRoleId?: string
+  onSubmit: (payload: InvitePayload) => Promise<void> | void
+  onCancel?: () => void
+  isSubmitting?: boolean
+}
+
+function parseEmails(raw: string): string[] {
+  return Array.from(
+    new Set(
+      raw
+        .split(/[\s,;\n]+/)
+        .map((s) => s.trim().toLowerCase())
+        .filter((s) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s))
+    )
+  )
+}
+
+/**
+ * Panel form for inviting one or more users by email with role selection.
+ */
+export function InviteUserPanel({
+  roles,
+  defaultRoleId,
+  onSubmit,
+  onCancel,
+  isSubmitting,
+}: InviteUserPanelProps): React.ReactElement {
+  const [emailsRaw, setEmailsRaw] = React.useState('')
+  const [roleId, setRoleId] = React.useState<string | undefined>(defaultRoleId ?? roles[0]?.id)
+  const [message, setMessage] = React.useState('')
+  const emails = React.useMemo(() => parseEmails(emailsRaw), [emailsRaw])
+  const canSubmit = emails.length > 0 && !!roleId && !isSubmitting
+
+  const handleFormSubmit = async (e: React.SyntheticEvent) => {
+    e.preventDefault()
+    if (!roleId || emails.length === 0) return
+    await onSubmit({ emails, roleId, message: message || undefined })
+  }
+
+  return (
+    <form onSubmit={handleFormSubmit} className="flex flex-col gap-4 p-4">
+      <div className="space-y-2">
+        <Label htmlFor="invite-emails">Adresses email</Label>
+        <Textarea
+          id="invite-emails"
+          value={emailsRaw}
+          onChange={(e) => setEmailsRaw(e.target.value)}
+          placeholder="alice@example.com, bob@example.com"
+          rows={3}
+        />
+        <p className="text-xs text-muted-foreground">
+          {emails.length} adresse{emails.length > 1 ? 's' : ''} détectée{emails.length > 1 ? 's' : ''}
+        </p>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="invite-role">Rôle</Label>
+        <RoleSelect id="invite-role" value={roleId} onChange={setRoleId} roles={roles} />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="invite-message">Message (optionnel)</Label>
+        <Textarea
+          id="invite-message"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          rows={3}
+        />
+      </div>
+      <div className="mt-auto flex justify-end gap-2 pt-4 border-t">
+        {onCancel && (
+          <Button type="button" variant="ghost" onClick={onCancel} disabled={isSubmitting}>
+            Annuler
+          </Button>
+        )}
+        <Button type="submit" disabled={!canSubmit}>
+          {isSubmitting ? "Envoi…" : "Envoyer l'invitation"}
+        </Button>
+      </div>
+    </form>
+  )
+}

package/src/blocks/_shared/identity/RoleSelect.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../components/select"
+import type { RoleDefinition } from './types'
+
+export interface RoleSelectProps {
+  value: string | undefined
+  onChange: (value: string) => void
+  roles: RoleDefinition[]
+  disabled?: boolean
+  placeholder?: string
+  triggerClassName?: string
+  /**
+   * Optional id assigned to the underlying SelectTrigger so that a sibling
+   * `<Label htmlFor={...}>` can target it. When omitted, a stable id is
+   * generated via `useId()` and exposed through `aria-labelledby` fallback.
+   */
+  id?: string
+  /** Alias for `id` — kept for explicit naming in calling code. */
+  triggerId?: string
+}
+
+/**
+ * Accessible role picker built on top of the shared Select primitive.
+ * Accepts an optional `id` (or `triggerId`) so that a sibling `<Label htmlFor>`
+ * can target the trigger button — falls back to `useId()` when unset.
+ */
+export function RoleSelect({
+  value,
+  onChange,
+  roles,
+  disabled,
+  placeholder = 'Rôle',
+  triggerClassName,
+  id,
+  triggerId,
+}: RoleSelectProps): React.ReactElement {
+  const generatedId = React.useId()
+  const resolvedId = id ?? triggerId ?? generatedId
+  return (
+    <Select value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectTrigger id={resolvedId} className={triggerClassName}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {roles.map((role) => (
+          <SelectItem key={role.id} value={role.id}>
+            {role.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/blocks/_shared/identity/SidePushLayout.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { X } from "lucide-react"
+import { cn } from "../../../utils"
+import { Button } from "../../../components/button"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "../../../components/sheet"
+
+export interface SidePushLayoutProps {
+  children: React.ReactNode
+  panel: React.ReactNode | null
+  panelWidth?: number
+  panelTitle?: string
+  onClose?: () => void
+  className?: string
+}
+
+const MOBILE_QUERY = '(max-width: 767px)'
+
+function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = React.useState(false)
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return
+    const mq = window.matchMedia(MOBILE_QUERY)
+    const update = () => setIsMobile(mq.matches)
+    update()
+    mq.addEventListener('change', update)
+    return () => mq.removeEventListener('change', update)
+  }, [])
+  return isMobile
+}
+
+export function SidePushLayout({
+  children,
+  panel,
+  panelWidth = 520,
+  panelTitle,
+  onClose,
+  className,
+}: SidePushLayoutProps): React.ReactElement {
+  const isMobile = useIsMobile()
+  const isOpen = panel !== null
+  const asideRef = React.useRef<HTMLElement | null>(null)
+  const previouslyFocusedRef = React.useRef<HTMLElement | null>(null)
+  const titleId = React.useId()
+
+  React.useEffect(() => {
+    if (!isOpen) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose?.()
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [isOpen, onClose])
+
+  React.useEffect(() => {
+    if (!isOpen) return
+    previouslyFocusedRef.current = document.activeElement as HTMLElement | null
+    if (asideRef.current) {
+      const focusable = asideRef.current.querySelector<HTMLElement>(
+        'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
+      )
+      focusable?.focus()
+    }
+    return () => {
+      previouslyFocusedRef.current?.focus?.()
+    }
+  }, [isOpen])
+
+  if (isMobile) {
+    return (
+      <div className={cn('flex w-full h-full', className)}>
+        <div className="flex-1 min-w-0">{children}</div>
+        <Sheet open={isOpen} onOpenChange={(open) => { if (!open) onClose?.() }}>
+          <SheetContent
+            side="right"
+            className="w-full p-0"
+            style={{ maxWidth: `${panelWidth}px` }}
+          >
+            {panelTitle && (
+              <SheetHeader className="px-4 py-3 border-b">
+                <SheetTitle>{panelTitle}</SheetTitle>
+                <SheetDescription className="sr-only">
+                  {panelTitle}
+                </SheetDescription>
+              </SheetHeader>
+            )}
+            <div className="overflow-y-auto h-full">{panel}</div>
+          </SheetContent>
+        </Sheet>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex w-full h-full', className)}>
+      <div className="flex-1 min-w-0">{children}</div>
+      <aside
+        ref={asideRef}
+        aria-hidden={!isOpen}
+        aria-labelledby={panelTitle ? titleId : undefined}
+        style={{ width: isOpen ? panelWidth : 0 }}
+        className={cn(
+          'shrink-0 overflow-hidden border-l bg-card transition-[width] duration-200 ease-out',
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+      >
+        {isOpen && (
+          <div className="flex h-full flex-col" style={{ width: panelWidth }}>
+            <header className="sticky top-0 z-10 flex items-center justify-between border-b bg-card px-4 py-3">
+              <h2 id={titleId} className="text-base font-semibold">
+                {panelTitle}
+              </h2>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onClose}
+                aria-label="Fermer"
+              >
+                <X className="size-4" />
+              </Button>
+            </header>
+            <div className="flex-1 overflow-y-auto">{panel}</div>
+          </div>
+        )}
+      </aside>
+    </div>
+  )
+}

package/src/blocks/_shared/identity/index.ts

@@ -0,0 +1,3 @@
+export { SidePushLayout } from './SidePushLayout'
+export type { SidePushLayoutProps } from './SidePushLayout'
+export type { UserRecord, RoleDefinition, InvitePayload, UserPatch } from './types'

package/src/blocks/_shared/identity/types.ts

@@ -0,0 +1,29 @@
+export interface UserRecord {
+  id: string
+  email: string
+  firstName?: string
+  lastName?: string
+  avatarUrl?: string
+  roleId: string
+  status: 'active' | 'invited' | 'suspended'
+  lastLoginAt?: Date
+}
+
+export interface RoleDefinition {
+  id: string
+  label: string
+  description?: string
+}
+
+export interface InvitePayload {
+  emails: string[]
+  roleId: string
+  message?: string
+}
+
+export interface UserPatch {
+  firstName?: string
+  lastName?: string
+  roleId?: string
+  status?: UserRecord['status']
+}

package/src/blocks/api-keys-manager/ApiKeysManager.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { WakaApiKeysManager } from './index'
+import type { ApiKeyRecord, ScopeDefinition } from './index'
+
+const scopes: ScopeDefinition[] = [
+  { id: 'read', label: 'Lecture', description: 'Accès lecture seule' },
+  { id: 'write', label: 'Écriture', description: 'Accès lecture + écriture' },
+  { id: 'admin', label: 'Administration', description: 'Accès complet' },
+]
+
+const keys: ApiKeyRecord[] = [
+  {
+    id: 'k1',
+    name: 'CI Production',
+    prefix: 'wks_live_a1b2',
+    scopes: ['read', 'write'],
+    lastUsedAt: new Date(2026, 4, 21),
+    expiresAt: new Date(2026, 11, 31),
+    status: 'active',
+    createdAt: new Date(2026, 0, 15),
+  },
+  {
+    id: 'k2',
+    name: 'Mobile App',
+    prefix: 'wks_live_c3d4',
+    scopes: ['read'],
+    status: 'rotating',
+    createdAt: new Date(2025, 9, 1),
+  },
+]
+
+const meta: Meta<typeof WakaApiKeysManager> = {
+  title: 'Blocks/Identity/ApiKeysManager',
+  component: WakaApiKeysManager,
+}
+export default meta
+
+type Story = StoryObj<typeof WakaApiKeysManager>
+
+const handlers = {
+  onCreate: async (p: { name: string; scopes: string[]; expiresAt?: Date }) => {
+    console.log('create', p)
+    return { token: 'wks_live_' + Math.random().toString(36).slice(2) }
+  },
+  onRevoke: async (id: string) => { console.log('revoke', id) },
+  onRotate: async (id: string, g: number) => {
+    console.log('rotate', id, g)
+    return { newToken: 'wks_live_' + Math.random().toString(36).slice(2) }
+  },
+} as const
+
+export const Default: Story = {
+  args: { keys, scopes, ...handlers },
+}
+
+export const Empty: Story = {
+  args: { keys: [], scopes, ...handlers },
+}
+
+export const Loading: Story = {
+  args: { keys: [], scopes, isLoading: true, ...handlers },
+}

package/src/blocks/api-keys-manager/WakaApiKeysManager.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Blocks/Identity/ApiKeysManager/Docs" />
+
+# WakaApiKeysManager
+
+Gestion des clés API d'un tenant : liste, création, rotation avec période de grâce, révocation. Le bloc est 100% présentationnel — la génération du token a lieu côté backend (le bloc reçoit le token via la Promise des callbacks).
+
+## Sécurité
+
+- Le token complet est affiché **une seule fois** dans un dialog one-time
+- Le token est effacé du state React à la fermeture du dialog (cleanup `useEffect`)
+- Le token n'est jamais persisté côté client (pas de `localStorage`, pas de `sessionStorage`)
+- Aucun `console.log` du token
+
+## Usage
+
+```tsx
+<WakaApiKeysManager
+  keys={apiKeys}
+  scopes={[{ id: 'read', label: 'Lecture' }, { id: 'write', label: 'Écriture' }]}
+  onCreate={async ({ name, scopes, expiresAt }) => {
+    const { token } = await api.createKey({ name, scopes, expiresAt })
+    return { token }
+  }}
+  onRotate={async (keyId, graceDays) => {
+    const { newToken } = await api.rotateKey(keyId, graceDays)
+    return { newToken }
+  }}
+  onRevoke={async (keyId) => api.revokeKey(keyId)}
+/>
+```