@dsfrkit/react 0.1.0

package/dist/providers/index.js

@@ -0,0 +1,203 @@
+'use strict';
+
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+// src/providers/router-provider.tsx
+var RouterContext = React2__namespace.createContext(null);
+function useRouter() {
+  return React2__namespace.useContext(RouterContext);
+}
+function RouterProvider({ Link, linkPropsAdapter, children }) {
+  const value = React2__namespace.useMemo(
+    () => ({
+      Link,
+      linkPropsAdapter: linkPropsAdapter ?? ((props) => props)
+    }),
+    [Link, linkPropsAdapter]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(RouterContext.Provider, { value, children });
+}
+var ThemeProviderContext = React2__namespace.createContext(void 0);
+var MEDIA_QUERY = "(prefers-color-scheme: dark)";
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia(MEDIA_QUERY).matches ? "dark" : "light";
+}
+function applyTheme(theme, attribute, disableTransition) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (disableTransition) {
+    root.style.setProperty("--transition-duration", "0s");
+  }
+  root.classList.remove("light", "dark");
+  root.removeAttribute("data-theme");
+  root.removeAttribute("data-fr-theme");
+  if (attribute === "class") {
+    root.classList.add(theme);
+  } else {
+    root.setAttribute("data-theme", theme);
+  }
+  root.setAttribute("data-fr-theme", theme);
+  if (disableTransition) {
+    void root.offsetHeight;
+    root.style.removeProperty("--transition-duration");
+  }
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "dsfrkit-theme",
+  attribute = "class",
+  disableTransitionOnChange = false
+}) {
+  const [theme, setThemeState] = React2__namespace.useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === "light" || stored === "dark" || stored === "system") {
+        return stored;
+      }
+    } catch {
+    }
+    return defaultTheme;
+  });
+  const [resolvedTheme, setResolvedTheme] = React2__namespace.useState(() => {
+    if (theme === "system") {
+      return getSystemTheme();
+    }
+    return theme;
+  });
+  React2__namespace.useEffect(() => {
+    const resolved = theme === "system" ? getSystemTheme() : theme;
+    setResolvedTheme(resolved);
+    applyTheme(resolved, attribute, disableTransitionOnChange);
+  }, [theme, attribute, disableTransitionOnChange]);
+  React2__namespace.useEffect(() => {
+    if (theme !== "system") return;
+    const mediaQuery = window.matchMedia(MEDIA_QUERY);
+    const handler = (e) => {
+      const resolved = e.matches ? "dark" : "light";
+      setResolvedTheme(resolved);
+      applyTheme(resolved, attribute, disableTransitionOnChange);
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [theme, attribute, disableTransitionOnChange]);
+  const setTheme = React2__namespace.useCallback(
+    (newTheme) => {
+      try {
+        localStorage.setItem(storageKey, newTheme);
+      } catch {
+      }
+      setThemeState(newTheme);
+    },
+    [storageKey]
+  );
+  const value = React2__namespace.useMemo(
+    () => ({ theme, resolvedTheme, setTheme }),
+    [theme, resolvedTheme, setTheme]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProviderContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = React2__namespace.useContext(ThemeProviderContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+function useThemeOptional() {
+  const context = React2__namespace.useContext(ThemeProviderContext);
+  if (context === void 0) {
+    return {
+      theme: "system",
+      resolvedTheme: "light",
+      setTheme: () => {
+        console.warn("useTheme: No ThemeProvider found, setTheme is a no-op");
+      }
+    };
+  }
+  return context;
+}
+function ThemeScript({
+  storageKey = "dsfrkit-theme",
+  attribute = "class",
+  defaultTheme = "system",
+  nonce
+}) {
+  const script = `
+(function() {
+  try {
+    var stored = localStorage.getItem('${storageKey}');
+    var theme = stored || '${defaultTheme}';
+    var resolved;
+
+    if (theme === 'system') {
+      resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    } else {
+      resolved = theme;
+    }
+
+    var root = document.documentElement;
+    ${attribute === "class" ? `root.classList.remove('light', 'dark');
+    root.classList.add(resolved);` : `root.removeAttribute('data-theme');
+    root.setAttribute('data-theme', resolved);`}
+    root.setAttribute('data-fr-theme', resolved);
+  } catch (e) {}
+})();
+`.trim();
+  return /* @__PURE__ */ jsxRuntime.jsx("script", { nonce, dangerouslySetInnerHTML: { __html: script } });
+}
+function getThemeScriptContent(options = {}) {
+  const { storageKey = "dsfrkit-theme", attribute = "class", defaultTheme = "system" } = options;
+  return `
+(function() {
+  try {
+    var stored = localStorage.getItem('${storageKey}');
+    var theme = stored || '${defaultTheme}';
+    var resolved;
+
+    if (theme === 'system') {
+      resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    } else {
+      resolved = theme;
+    }
+
+    var root = document.documentElement;
+    ${attribute === "class" ? `root.classList.remove('light', 'dark');
+    root.classList.add(resolved);` : `root.removeAttribute('data-theme');
+    root.setAttribute('data-theme', resolved);`}
+    root.setAttribute('data-fr-theme', resolved);
+  } catch (e) {}
+})();
+`.trim();
+}
+
+exports.RouterProvider = RouterProvider;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeScript = ThemeScript;
+exports.getThemeScriptContent = getThemeScriptContent;
+exports.useRouter = useRouter;
+exports.useTheme = useTheme;
+exports.useThemeOptional = useThemeOptional;

package/dist/providers/index.mjs

@@ -0,0 +1,3 @@
+export { ThemeScript, getThemeScriptContent } from '../chunk-IFYYNQ45.mjs';
+export { ThemeProvider, useTheme, useThemeOptional } from '../chunk-RN7K57U3.mjs';
+export { RouterProvider, useRouter } from '../chunk-C4BBQTZ3.mjs';

package/dist/theme-provider-DQSD5lrW.d.mts

@@ -0,0 +1,82 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    /**
+     * Thème par défaut
+     * @default 'system'
+     */
+    defaultTheme?: Theme;
+    /**
+     * Clé de stockage localStorage
+     * @default 'dsfrkit-theme'
+     */
+    storageKey?: string;
+    /**
+     * Attribut à appliquer sur l'élément html
+     * @default 'class'
+     */
+    attribute?: 'class' | 'data-theme';
+    /**
+     * Désactiver la persistance localStorage
+     * @default false
+     */
+    disableTransitionOnChange?: boolean;
+}
+interface ThemeProviderState {
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+    setTheme: (theme: Theme) => void;
+}
+/**
+ * Provider pour la gestion du thème clair/sombre
+ *
+ * @example
+ * ```tsx
+ * // Dans votre layout racine
+ * import { ThemeProvider, ThemeScript } from '@dsfrkit/react/providers'
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <ThemeScript />
+ *       </head>
+ *       <body>
+ *         <ThemeProvider>
+ *           {children}
+ *         </ThemeProvider>
+ *       </body>
+ *     </html>
+ *   )
+ * }
+ * ```
+ */
+declare function ThemeProvider({ children, defaultTheme, storageKey, attribute, disableTransitionOnChange, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook pour accéder au contexte de thème
+ *
+ * @example
+ * ```tsx
+ * function ThemeToggle() {
+ *   const { theme, setTheme, resolvedTheme } = useTheme()
+ *
+ *   return (
+ *     <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
+ *       Thème actuel: {resolvedTheme}
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+declare function useTheme(): ThemeProviderState;
+/**
+ * Hook optionnel qui ne throw pas si utilisé hors du provider
+ * Retourne les valeurs par défaut si pas de provider
+ */
+declare function useThemeOptional(): ThemeProviderState;
+
+export { type ResolvedTheme as R, type Theme as T, ThemeProvider as a, type ThemeProviderProps as b, type ThemeProviderState as c, useThemeOptional as d, useTheme as u };

package/dist/theme-provider-DQSD5lrW.d.ts

@@ -0,0 +1,82 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    /**
+     * Thème par défaut
+     * @default 'system'
+     */
+    defaultTheme?: Theme;
+    /**
+     * Clé de stockage localStorage
+     * @default 'dsfrkit-theme'
+     */
+    storageKey?: string;
+    /**
+     * Attribut à appliquer sur l'élément html
+     * @default 'class'
+     */
+    attribute?: 'class' | 'data-theme';
+    /**
+     * Désactiver la persistance localStorage
+     * @default false
+     */
+    disableTransitionOnChange?: boolean;
+}
+interface ThemeProviderState {
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+    setTheme: (theme: Theme) => void;
+}
+/**
+ * Provider pour la gestion du thème clair/sombre
+ *
+ * @example
+ * ```tsx
+ * // Dans votre layout racine
+ * import { ThemeProvider, ThemeScript } from '@dsfrkit/react/providers'
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <ThemeScript />
+ *       </head>
+ *       <body>
+ *         <ThemeProvider>
+ *           {children}
+ *         </ThemeProvider>
+ *       </body>
+ *     </html>
+ *   )
+ * }
+ * ```
+ */
+declare function ThemeProvider({ children, defaultTheme, storageKey, attribute, disableTransitionOnChange, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook pour accéder au contexte de thème
+ *
+ * @example
+ * ```tsx
+ * function ThemeToggle() {
+ *   const { theme, setTheme, resolvedTheme } = useTheme()
+ *
+ *   return (
+ *     <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
+ *       Thème actuel: {resolvedTheme}
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+declare function useTheme(): ThemeProviderState;
+/**
+ * Hook optionnel qui ne throw pas si utilisé hors du provider
+ * Retourne les valeurs par défaut si pas de provider
+ */
+declare function useThemeOptional(): ThemeProviderState;
+
+export { type ResolvedTheme as R, type Theme as T, ThemeProvider as a, type ThemeProviderProps as b, type ThemeProviderState as c, useThemeOptional as d, useTheme as u };

package/dist/theme-script-BIZ1PX7u.d.mts

@@ -0,0 +1,75 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ThemeScriptProps {
+    /**
+     * Clé de stockage localStorage (doit correspondre à ThemeProvider)
+     * @default 'dsfrkit-theme'
+     */
+    storageKey?: string;
+    /**
+     * Attribut à appliquer sur l'élément html
+     * @default 'class'
+     */
+    attribute?: 'class' | 'data-theme';
+    /**
+     * Thème par défaut si aucun n'est stocké
+     * @default 'system'
+     */
+    defaultTheme?: 'light' | 'dark' | 'system';
+    /**
+     * Utiliser un nonce pour CSP
+     */
+    nonce?: string;
+}
+/**
+ * Script inline pour éviter le flash de thème au chargement
+ * Doit être placé dans le <head> AVANT tout CSS ou React
+ *
+ * Ce script s'exécute de manière synchrone avant le rendu,
+ * appliquant immédiatement la classe de thème sur <html>
+ *
+ * @example
+ * ```tsx
+ * // Next.js App Router - app/layout.tsx
+ * import { ThemeScript } from '@dsfrkit/react/providers'
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html lang="fr" suppressHydrationWarning>
+ *       <head>
+ *         <ThemeScript />
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Next.js Pages Router - pages/_document.tsx
+ * import { ThemeScript } from '@dsfrkit/react/providers'
+ *
+ * export default function Document() {
+ *   return (
+ *     <Html lang="fr" suppressHydrationWarning>
+ *       <Head>
+ *         <ThemeScript />
+ *       </Head>
+ *       <body>
+ *         <Main />
+ *         <NextScript />
+ *       </body>
+ *     </Html>
+ *   )
+ * }
+ * ```
+ */
+declare function ThemeScript({ storageKey, attribute, defaultTheme, nonce, }: ThemeScriptProps): react_jsx_runtime.JSX.Element;
+/**
+ * Variante du script qui retourne juste le code JS
+ * Utile pour les cas où vous devez injecter le script manuellement
+ */
+declare function getThemeScriptContent(options?: Omit<ThemeScriptProps, 'nonce'>): string;
+
+export { ThemeScript as T, type ThemeScriptProps as a, getThemeScriptContent as g };

package/dist/theme-script-BIZ1PX7u.d.ts

@@ -0,0 +1,75 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ThemeScriptProps {
+    /**
+     * Clé de stockage localStorage (doit correspondre à ThemeProvider)
+     * @default 'dsfrkit-theme'
+     */
+    storageKey?: string;
+    /**
+     * Attribut à appliquer sur l'élément html
+     * @default 'class'
+     */
+    attribute?: 'class' | 'data-theme';
+    /**
+     * Thème par défaut si aucun n'est stocké
+     * @default 'system'
+     */
+    defaultTheme?: 'light' | 'dark' | 'system';
+    /**
+     * Utiliser un nonce pour CSP
+     */
+    nonce?: string;
+}
+/**
+ * Script inline pour éviter le flash de thème au chargement
+ * Doit être placé dans le <head> AVANT tout CSS ou React
+ *
+ * Ce script s'exécute de manière synchrone avant le rendu,
+ * appliquant immédiatement la classe de thème sur <html>
+ *
+ * @example
+ * ```tsx
+ * // Next.js App Router - app/layout.tsx
+ * import { ThemeScript } from '@dsfrkit/react/providers'
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html lang="fr" suppressHydrationWarning>
+ *       <head>
+ *         <ThemeScript />
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Next.js Pages Router - pages/_document.tsx
+ * import { ThemeScript } from '@dsfrkit/react/providers'
+ *
+ * export default function Document() {
+ *   return (
+ *     <Html lang="fr" suppressHydrationWarning>
+ *       <Head>
+ *         <ThemeScript />
+ *       </Head>
+ *       <body>
+ *         <Main />
+ *         <NextScript />
+ *       </body>
+ *     </Html>
+ *   )
+ * }
+ * ```
+ */
+declare function ThemeScript({ storageKey, attribute, defaultTheme, nonce, }: ThemeScriptProps): react_jsx_runtime.JSX.Element;
+/**
+ * Variante du script qui retourne juste le code JS
+ * Utile pour les cas où vous devez injecter le script manuellement
+ */
+declare function getThemeScriptContent(options?: Omit<ThemeScriptProps, 'nonce'>): string;
+
+export { ThemeScript as T, type ThemeScriptProps as a, getThemeScriptContent as g };

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@dsfrkit/react",
+  "version": "0.1.0",
+  "description": "Composants React source pour le Système de Design de l'État français (DSFR)",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./providers": {
+      "types": "./dist/providers/index.d.ts",
+      "import": "./dist/providers/index.mjs",
+      "require": "./dist/providers/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs",
+      "require": "./dist/hooks/index.js"
+    },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "import": "./dist/i18n/index.mjs",
+      "require": "./dist/i18n/index.js"
+    },
+    "./primitives": {
+      "types": "./dist/primitives/index.d.ts",
+      "import": "./dist/primitives/index.mjs",
+      "require": "./dist/primitives/index.js"
+    },
+    "./navigation": {
+      "types": "./dist/components/navigation/index.d.ts",
+      "import": "./dist/components/navigation/index.mjs",
+      "require": "./dist/components/navigation/index.js"
+    },
+    "./layout": {
+      "types": "./dist/components/layout/index.d.ts",
+      "import": "./dist/components/layout/index.mjs",
+      "require": "./dist/components/layout/index.js"
+    },
+    "./dashboard": {
+      "types": "./dist/components/dashboard/index.d.ts",
+      "import": "./dist/components/dashboard/index.mjs",
+      "require": "./dist/components/dashboard/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.mjs",
+      "require": "./dist/components/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "dsfr",
+    "react",
+    "components",
+    "design-system",
+    "tailwindcss"
+  ],
+  "license": "ETALAB-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@dsfrkit/icons": "workspace:*",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.2",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "input-otp": "^1.4.2",
+    "react-day-picker": "^9.14.0",
+    "tailwind-merge": "^2.5.5"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "react": "^18.3.1",
+    "react-docgen-typescript": "^2.4.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}