@situaction/traquiste-docs-kit 0.0.0-stage → 1.1.0

package/dist/pages/createComponentPage.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Factory that generates a full documentation page for a component */
+import { useDocsConfig } from '../app/config';
+import PropsTable from '../components/PropsTable';
+import LiveEditor from '../components/LiveEditor';
+import TableOfContents from '../components/layout/TableOfContents';
+import { pageStyles, slugify } from '../styles/pageStyles';
+import { useCopy } from '../hooks/useCopy';
+/** Props section body: the hand-written table, or the one generated by the docgen plugin */
+function PageProps({ props, componentName }) {
+    const { componentProps } = useDocsConfig();
+    if (props !== 'auto')
+        return _jsx(PropsTable, { props: props });
+    const generated = componentProps?.[componentName];
+    if (generated)
+        return _jsx(PropsTable, { props: generated });
+    return (_jsxs("div", { style: S.propsMissing, role: "note", children: ["Props introuvables pour ", _jsx("code", { children: componentName }), ". V\u00E9rifie que le plugin ", _jsx("code", { children: "docgen()" }), " est dans le", ' ', _jsx("code", { children: "vite.config.ts" }), " de la doc, que ", _jsx("code", { children: "componentProps" }), " est pass\u00E9 \u00E0 ", _jsx("code", { children: "defineDocsConfig" }), ", et que le fichier du composant fait partie de son ", _jsx("code", { children: "include" }), "."] }));
+}
+const STATUS_CONFIG = {
+    stable: { label: 'Stable', color: '#16a34a', bg: '#f0fdf4', border: '#bbf7d0' },
+    beta: { label: 'Beta', color: '#d97706', bg: '#fffbeb', border: '#fde68a' },
+    new: { label: 'Nouveau', color: '#2563eb', bg: '#eff6ff', border: '#bfdbfe' },
+    updated: { label: 'Mis à jour', color: '#7c3aed', bg: '#f5f3ff', border: '#ddd6fe' },
+    deprecated: { label: 'Déprécié', color: '#dc2626', bg: '#fef2f2', border: '#fecaca' },
+};
+function StatusBadge({ status }) {
+    const { label, color, bg, border } = STATUS_CONFIG[status];
+    return (_jsx("span", { style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            fontSize: 11,
+            fontWeight: 700,
+            letterSpacing: '0.05em',
+            textTransform: 'uppercase',
+            color,
+            backgroundColor: bg,
+            border: `1px solid ${border}`,
+            borderRadius: 999,
+            padding: '3px 10px',
+        }, children: label }));
+}
+function ImportBlock({ componentName }) {
+    const { copied, copy } = useCopy();
+    const { packageName } = useDocsConfig();
+    const snippet = `import { ${componentName} } from '${packageName}'`;
+    return (_jsxs("div", { style: S.importBlock, children: [_jsx("code", { style: S.importCode, children: snippet }), _jsx("button", { style: { ...S.importBtn, ...(copied ? S.importBtnCopied : {}) }, onClick: () => copy(snippet), children: copied ? '✓ Copié' : 'Copier' })] }));
+}
+function FigmaIcon() {
+    return (_jsxs("svg", { width: "12", height: "16", viewBox: "0 0 38 57", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M19 28.5A9.5 9.5 0 1 1 28.5 19 9.5 9.5 0 0 1 19 28.5Z", fill: "#1ABCFE" }), _jsx("path", { d: "M0 47.5A9.5 9.5 0 0 1 9.5 38H19V47.5A9.5 9.5 0 0 1 0 47.5Z", fill: "#0ACF83" }), _jsx("path", { d: "M19 0V19H28.5A9.5 9.5 0 0 0 19 0Z", fill: "#FF7262" }), _jsx("path", { d: "M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5Z", fill: "#F24E1E" }), _jsx("path", { d: "M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5Z", fill: "#A259FF" })] }));
+}
+const S = {
+    ...pageStyles,
+    meta: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: 40,
+    },
+    importBlock: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+        backgroundColor: '#0d1117',
+        border: '1px solid var(--docs-border)',
+        borderRadius: 8,
+        padding: '12px 16px',
+        marginBottom: 40,
+    },
+    importCode: {
+        fontFamily: 'ui-monospace, Consolas, monospace',
+        fontSize: 13,
+        color: '#e6edf3',
+        flex: 1,
+    },
+    importBtn: {
+        fontSize: 11,
+        fontWeight: 500,
+        padding: '3px 8px',
+        border: '1px solid #30363d',
+        borderRadius: 5,
+        cursor: 'pointer',
+        backgroundColor: '#21262d',
+        color: '#8b949e',
+        fontFamily: 'inherit',
+        whiteSpace: 'nowrap',
+        flexShrink: 0,
+    },
+    importBtnCopied: {
+        color: '#3fb950',
+        borderColor: '#238636',
+        backgroundColor: '#0d1117',
+    },
+    figmaBtn: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        fontSize: 13,
+        fontWeight: 500,
+        color: 'var(--docs-text-secondary)',
+        backgroundColor: 'var(--docs-surface)',
+        border: '1px solid var(--docs-border)',
+        borderRadius: 6,
+        padding: '5px 12px',
+        textDecoration: 'none',
+        boxShadow: 'var(--docs-shadow-sm)',
+        transition: 'color 0.15s, border-color 0.15s',
+    },
+    propsMissing: {
+        marginTop: 16,
+        padding: '12px 16px',
+        fontSize: 14,
+        lineHeight: 1.6,
+        color: 'var(--docs-text-secondary)',
+        backgroundColor: 'var(--docs-surface)',
+        border: '1px dashed var(--docs-border)',
+        borderRadius: 8,
+    },
+    propsHeading: {
+        fontSize: 22,
+        fontWeight: 600,
+        lineHeight: 1.6,
+        color: 'var(--docs-text-primary)',
+        marginBottom: 16,
+        marginTop: 40,
+        paddingTop: 24,
+        borderTop: '1px solid var(--docs-border)',
+        scrollMarginTop: 80,
+    },
+};
+export function createComponentPage(config) {
+    const tocItems = [];
+    const seenSections = new Set();
+    for (const demo of config.demos) {
+        if (demo.section && !seenSections.has(demo.section)) {
+            seenSections.add(demo.section);
+            tocItems.push({ id: slugify(demo.section), label: demo.section });
+        }
+    }
+    tocItems.push({ id: 'props', label: 'Props' });
+    return function ComponentPage() {
+        let lastSection = '';
+        return (_jsxs("div", { style: S.layout, children: [_jsxs("div", { style: S.content, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }, children: [_jsx("h1", { style: { ...S.title, marginBottom: 0 }, children: config.title }), config.status && _jsx(StatusBadge, { status: config.status })] }), _jsxs("div", { style: S.meta, children: [_jsx("p", { style: { ...S.description, margin: 0, flex: 1 }, children: config.description }), config.figma && (_jsxs("a", { href: config.figma, target: "_blank", rel: "noreferrer", style: S.figmaBtn, children: [_jsx(FigmaIcon, {}), "Figma"] }))] }), _jsx(ImportBlock, { componentName: config.title }), _jsx("section", { children: config.demos.map((demo, i) => {
+                                const showSection = !!demo.section && demo.section !== lastSection;
+                                if (demo.section)
+                                    lastSection = demo.section;
+                                return (_jsxs("div", { children: [showSection && (_jsxs(_Fragment, { children: [_jsx("h2", { id: slugify(demo.section), style: S.sectionHeading, children: demo.section }), demo.sectionDescription && (_jsx("p", { style: S.sectionDescription, children: demo.sectionDescription }))] })), _jsx(LiveEditor, { title: demo.title, initialCode: demo.code, scope: config.scope, phoneFrame: demo.phoneFrame })] }, i));
+                            }) }), _jsxs("section", { children: [_jsx("h2", { id: "props", style: S.propsHeading, children: "Props" }), _jsx(PageProps, { props: config.props, componentName: config.propsOf ?? config.title })] })] }), _jsx(TableOfContents, { items: tocItems })] }));
+    };
+}

package/dist/pages/createScreenPage.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { DeviceType } from '../components/DeviceFrame';
+export interface ScreenConfig {
+    /** Tab label */
+    label: string;
+    /** Id used in the URL (`?screen=…`) — defaults to the slugified label */
+    id?: string;
+    /** What the screen shows and when it appears */
+    description?: ReactNode;
+    /** Library components used — linked to their docs page when one has this label */
+    components?: string[];
+    /** Implementation notes */
+    notes?: ReactNode;
+    /** Address shown in the browser bar — overrides the page's `url` */
+    url?: string;
+    /** The screen itself, rendered inside the device and the library's theme */
+    component: ComponentType;
+}
+export interface ScreenPageConfig {
+    title: string;
+    description?: ReactNode;
+    /** 'phone' for the mobile library, 'browser' for the web library (default 'phone') */
+    device?: DeviceType;
+    /** Screen size in px — phone 390 × 760, browser 1024 × 640 by default */
+    width?: number;
+    height?: number;
+    /** Address shown in the browser bar */
+    url?: string;
+    screens: ScreenConfig[];
+}
+/** Generates a page showing a flow of full screens, one tab per screen */
+export declare function createScreenPage(config: ScreenPageConfig): () => import("react").JSX.Element;
+//# sourceMappingURL=createScreenPage.d.ts.map

package/dist/pages/createScreenPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createScreenPage.d.ts","sourceRoot":"","sources":["../../src/pages/createScreenPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAKpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,WAAW,YAAY;IAC3B,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,gDAAgD;IAChD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,SAAS,EAAE,aAAa,CAAA;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAoFD,0EAA0E;AAC1E,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,qCA8HxD"}

package/dist/pages/createScreenPage.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Factory for full-screen pages: a flow of screens (login, dashboard…) shown in a device frame */
+import { useRef } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { useDocsConfig } from '../app/config';
+import { useColorMode } from '../app/ColorModeContext';
+import { DeviceFrame } from '../components/DeviceFrame';
+import { pageStyles, slugify } from '../styles/pageStyles';
+const DEFAULT_HEIGHT = { phone: 760, browser: 640 };
+const S = {
+    ...pageStyles,
+    tabs: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 6,
+        padding: 4,
+        marginBottom: 32,
+        borderRadius: 10,
+        border: '1px solid var(--docs-border)',
+        backgroundColor: 'var(--docs-surface)',
+        width: 'fit-content',
+        maxWidth: '100%',
+    },
+    tab: (active) => ({
+        fontSize: 13,
+        fontWeight: active ? 600 : 500,
+        fontFamily: 'inherit',
+        padding: '6px 14px',
+        borderRadius: 7,
+        border: 'none',
+        cursor: 'pointer',
+        color: active ? 'var(--docs-text-primary)' : 'var(--docs-text-muted)',
+        backgroundColor: active ? 'var(--docs-bg)' : 'transparent',
+        boxShadow: active ? 'var(--docs-shadow-sm)' : 'none',
+    }),
+    body: (device) => ({
+        display: 'flex',
+        // Phones sit next to their description; wide browser windows go above it
+        flexDirection: device === 'phone' ? 'row' : 'column',
+        flexWrap: 'wrap',
+        alignItems: 'flex-start',
+        gap: 40,
+    }),
+    panel: {
+        flex: '1 1 280px',
+        minWidth: 0,
+        maxWidth: 520,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+    },
+    step: { fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--docs-text-muted)' },
+    screenTitle: { fontSize: 20, fontWeight: 600, lineHeight: 1.4, color: 'var(--docs-text-primary)' },
+    text: { fontSize: 15, lineHeight: 1.65, color: 'var(--docs-text-secondary)' },
+    box: {
+        fontSize: 14,
+        lineHeight: 1.6,
+        color: 'var(--docs-text-secondary)',
+        padding: '12px 16px',
+        borderRadius: 8,
+        border: '1px solid var(--docs-border)',
+        backgroundColor: 'var(--docs-surface)',
+    },
+    boxTitle: { display: 'block', fontWeight: 600, color: 'var(--docs-text-primary)', marginBottom: 8 },
+    chips: { display: 'flex', flexWrap: 'wrap', gap: 6 },
+    chip: {
+        fontFamily: 'ui-monospace, Consolas, monospace',
+        fontSize: 12,
+        padding: '2px 8px',
+        borderRadius: 999,
+        border: '1px solid var(--docs-border)',
+        backgroundColor: 'var(--docs-bg)',
+        color: 'var(--docs-text-primary)',
+        textDecoration: 'none',
+    },
+    nav: { display: 'flex', justifyContent: 'space-between', gap: 8 },
+    navBtn: (disabled) => ({
+        fontSize: 13,
+        fontWeight: 500,
+        fontFamily: 'inherit',
+        padding: '6px 12px',
+        borderRadius: 7,
+        border: '1px solid var(--docs-border)',
+        backgroundColor: 'var(--docs-bg)',
+        color: disabled ? 'var(--docs-text-disabled)' : 'var(--docs-text-primary)',
+        cursor: disabled ? 'default' : 'pointer',
+    }),
+};
+/** Generates a page showing a flow of full screens, one tab per screen */
+export function createScreenPage(config) {
+    const device = config.device ?? 'phone';
+    const screens = config.screens.map((screen) => ({ ...screen, id: screen.id ?? slugify(screen.label) }));
+    return function ScreenPage() {
+        const [params, setParams] = useSearchParams();
+        const { wrapper: Wrapper, pages } = useDocsConfig();
+        const { mode } = useColorMode();
+        const tabRefs = useRef([]);
+        // The active screen lives in the URL, so a screen can be linked to directly
+        const index = Math.max(0, screens.findIndex((s) => s.id === params.get('screen')));
+        const screen = screens[index];
+        const Screen = screen.component;
+        const select = (i) => setParams((prev) => {
+            const next = new URLSearchParams(prev);
+            next.set('screen', screens[i].id);
+            return next;
+        }, { replace: true });
+        // Arrow keys move between tabs, as expected from a tablist
+        function onTabKeyDown(e) {
+            const delta = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
+            if (!delta)
+                return;
+            const next = (index + delta + screens.length) % screens.length;
+            select(next);
+            tabRefs.current[next]?.focus();
+        }
+        const pageFor = (name) => pages.find((p) => p.label === name);
+        return (_jsxs("div", { children: [_jsx("h1", { style: S.title, children: config.title }), config.description && _jsx("p", { style: S.description, children: config.description }), _jsx("div", { role: "tablist", "aria-label": "\u00C9crans", style: S.tabs, onKeyDown: onTabKeyDown, children: screens.map((s, i) => (_jsx("button", { ref: (el) => {
+                            tabRefs.current[i] = el;
+                        }, type: "button", role: "tab", id: `screen-tab-${s.id}`, "aria-selected": i === index, "aria-controls": "screen-panel", tabIndex: i === index ? 0 : -1, style: S.tab(i === index), onClick: () => select(i), children: s.label }, s.id))) }), _jsxs("div", { id: "screen-panel", role: "tabpanel", "aria-labelledby": `screen-tab-${screen.id}`, style: S.body(device), children: [_jsx(DeviceFrame, { device: device, width: config.width, height: config.height ?? DEFAULT_HEIGHT[device], url: screen.url ?? config.url, children: _jsx("div", { className: "docs-screen docs-demo", children: _jsx(Wrapper, { mode: mode, children: _jsx(Screen, {}, screen.id) }) }) }), _jsxs("aside", { style: S.panel, children: [_jsxs("span", { style: S.step, children: ["\u00C9cran ", index + 1, " / ", screens.length] }), _jsx("h2", { style: S.screenTitle, children: screen.label }), screen.description && _jsx("div", { style: S.text, children: screen.description }), screen.components && screen.components.length > 0 && (_jsxs("div", { style: S.box, children: [_jsx("strong", { style: S.boxTitle, children: "Composants utilis\u00E9s" }), _jsx("div", { style: S.chips, children: screen.components.map((name) => {
+                                                const page = pageFor(name);
+                                                return page ? (_jsx(Link, { to: page.path, style: S.chip, children: name }, name)) : (_jsx("code", { style: S.chip, children: name }, name));
+                                            }) })] })), screen.notes && _jsx("div", { style: S.box, children: screen.notes }), screens.length > 1 && (_jsxs("div", { style: S.nav, children: [_jsx("button", { type: "button", style: S.navBtn(index === 0), disabled: index === 0, onClick: () => select(index - 1), children: "\u2190 Pr\u00E9c\u00E9dent" }), _jsx("button", { type: "button", style: S.navBtn(index === screens.length - 1), disabled: index === screens.length - 1, onClick: () => select(index + 1), children: "Suivant \u2192" })] }))] })] })] }));
+    };
+}

package/dist/styles/docs.css

@@ -0,0 +1,177 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ===== Light theme (default) ===== */
+:root {
+  --docs-bg:             #ffffff;
+  --docs-bg-rgb:         255, 255, 255;
+  --docs-bg-subtle:      #f9fafb;
+  --docs-surface:        #f4f4f5;
+  --docs-border:         #e4e4e7;
+
+  --docs-text-primary:   #18181b;
+  --docs-text-secondary: #52525b;
+  --docs-text-muted:     #a1a1aa;
+  --docs-text-disabled:  #d4d4d8;
+
+  --docs-accent:         #0072E5;
+  --docs-accent-subtle:  rgba(0, 114, 229, 0.08);
+
+  --docs-shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
+  --docs-shadow-md:      0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
+
+  --docs-badge-name-color:    #dc2626;
+  --docs-badge-name-bg:       #fef2f2;
+  --docs-badge-type-color:    #2563eb;
+  --docs-badge-type-bg:       #eff6ff;
+  --docs-badge-default-color: #16a34a;
+  --docs-badge-default-bg:    #f0fdf4;
+  /* Callouts (guide pages) */
+  --docs-callout-info-bg:       #eff6ff;
+  --docs-callout-info-border:   #bfdbfe;
+  --docs-callout-info-accent:   #2563eb;
+  --docs-callout-tip-bg:        #f0fdf4;
+  --docs-callout-tip-border:    #bbf7d0;
+  --docs-callout-tip-accent:    #16a34a;
+  --docs-callout-warning-bg:    #fffbeb;
+  --docs-callout-warning-border:#fde68a;
+  --docs-callout-warning-accent:#d97706;
+  --docs-callout-danger-bg:     #fef2f2;
+  --docs-callout-danger-border: #fecaca;
+  --docs-callout-danger-accent: #dc2626;
+
+}
+
+/* ===== Dark theme ===== */
+[data-theme="dark"] {
+  --docs-bg:             #09090b;
+  --docs-bg-rgb:         9, 9, 11;
+  --docs-bg-subtle:      #18181b;
+  --docs-surface:        #27272a;
+  --docs-border:         #3f3f46;
+
+  --docs-text-primary:   #fafafa;
+  --docs-text-secondary: #a1a1aa;
+  --docs-text-muted:     #71717a;
+  --docs-text-disabled:  #52525b;
+
+  --docs-accent:         #60a5fa;
+  --docs-accent-subtle:  rgba(96, 165, 250, 0.1);
+
+  --docs-shadow-sm:      0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
+  --docs-shadow-md:      0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
+
+  --docs-badge-name-color:    #fca5a5;
+  --docs-badge-name-bg:       #450a0a;
+  --docs-badge-type-color:    #93c5fd;
+  --docs-badge-type-bg:       #0c1a2e;
+  --docs-badge-default-color: #86efac;
+  --docs-badge-default-bg:    #052e16;
+  --docs-callout-info-bg:       rgba(37, 99, 235, 0.12);
+  --docs-callout-info-border:   rgba(96, 165, 250, 0.35);
+  --docs-callout-info-accent:   #60a5fa;
+  --docs-callout-tip-bg:        rgba(22, 163, 74, 0.12);
+  --docs-callout-tip-border:    rgba(74, 222, 128, 0.3);
+  --docs-callout-tip-accent:    #4ade80;
+  --docs-callout-warning-bg:    rgba(217, 119, 6, 0.12);
+  --docs-callout-warning-border:rgba(251, 191, 36, 0.3);
+  --docs-callout-warning-accent:#fbbf24;
+  --docs-callout-danger-bg:     rgba(220, 38, 38, 0.12);
+  --docs-callout-danger-border: rgba(248, 113, 113, 0.3);
+  --docs-callout-danger-accent: #f87171;
+
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--docs-font-family, 'Urbanist'), -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--docs-bg);
+  color: var(--docs-text-primary);
+  transition: background 0.2s, color 0.2s;
+}
+
+/* A documented library may size html/body globally (e.g. `:root, body { width: 100vw }`),
+   which adds a horizontal scrollbar. Higher specificity wins whatever the load order. */
+html:root,
+html body {
+  width: auto;
+}
+
+#root {
+  display: contents;
+}
+
+/* ===== Guide pages (DocPage) =====
+   Plain p / ul / code / a written in a guide. `:not(.docs-demo *)` leaves live demos untouched:
+   they must render like in an app, with the library's own styles. */
+.docs-prose p:not(.docs-demo *) {
+  margin: 0 0 16px;
+  line-height: 1.7;
+  color: var(--docs-text-secondary);
+}
+
+.docs-prose h3:not(.docs-demo *) {
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.4;
+  margin: 28px 0 10px;
+  color: var(--docs-text-primary);
+}
+
+.docs-prose ul:not(.docs-demo *),
+.docs-prose ol:not(.docs-demo *) {
+  margin: 0 0 16px;
+  padding-left: 22px;
+  line-height: 1.7;
+  color: var(--docs-text-secondary);
+}
+
+.docs-prose ul:not(.docs-demo *) { list-style: disc; }
+.docs-prose ol:not(.docs-demo *) { list-style: decimal; }
+.docs-prose li:not(.docs-demo *) { margin-bottom: 4px; }
+
+.docs-prose a:not(.docs-demo *) {
+  color: var(--docs-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.docs-prose strong:not(.docs-demo *) {
+  font-weight: 600;
+  color: var(--docs-text-primary);
+}
+
+.docs-prose :not(pre) > code:not(.docs-demo *) {
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 0.88em;
+  padding: 1px 5px;
+  border: 1px solid var(--docs-border);
+  border-radius: 4px;
+  background: var(--docs-surface);
+  color: var(--docs-text-primary);
+}
+
+/* Callout text sits on a tinted background: primary color, no trailing gap */
+.docs-callout-body p:not(.docs-demo *) { color: inherit; margin-bottom: 8px; }
+.docs-callout-body > :last-child { margin-bottom: 0; }
+
+/* ===== Full screens (createScreenPage) =====
+   The screen fills the device height, also through a wrapper that renders its own element
+   (e.g. a ThemeProvider <div>): a screen root with `flex: 1` stretches to the bottom. */
+.docs-screen,
+.docs-screen > * {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}

package/dist/styles/pageStyles.d.ts

@@ -0,0 +1,45 @@
+export declare const pageStyles: {
+    layout: {
+        display: "flex";
+        gap: number;
+        alignItems: "flex-start";
+    };
+    content: {
+        flex: number;
+        minWidth: number;
+    };
+    title: {
+        fontSize: number;
+        fontWeight: number;
+        lineHeight: number;
+        marginBottom: number;
+        color: "var(--docs-text-primary)";
+        letterSpacing: string;
+    };
+    description: {
+        fontSize: number;
+        color: "var(--docs-text-secondary)";
+        marginBottom: number;
+        lineHeight: number;
+    };
+    sectionHeading: {
+        fontSize: number;
+        fontWeight: number;
+        lineHeight: number;
+        color: "var(--docs-text-primary)";
+        marginBottom: number;
+        marginTop: number;
+        paddingTop: number;
+        borderTop: string;
+        scrollMarginTop: number;
+    };
+    sectionDescription: {
+        fontSize: number;
+        color: "var(--docs-text-secondary)";
+        lineHeight: number;
+        marginBottom: number;
+    };
+};
+/** Anchor id for a heading — accents folded so French titles keep readable ids ('États' → 'etats') */
+export declare function slugify(text: string): string;
+//# sourceMappingURL=pageStyles.d.ts.map

package/dist/styles/pageStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageStyles.d.ts","sourceRoot":"","sources":["../../src/styles/pageStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCkB,CAAA;AAEzC,sGAAsG;AACtG,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQ5C"}

package/dist/styles/pageStyles.js

@@ -0,0 +1,46 @@
+export const pageStyles = {
+    layout: { display: 'flex', gap: 48, alignItems: 'flex-start' },
+    content: { flex: 1, minWidth: 0 },
+    title: {
+        fontSize: 36,
+        fontWeight: 700,
+        // Explicit line-height: a library's global h1–h6 rules must not restyle the docs headings
+        lineHeight: 1.6,
+        marginBottom: 8,
+        color: 'var(--docs-text-primary)',
+        letterSpacing: '-0.02em',
+    },
+    description: {
+        fontSize: 16,
+        color: 'var(--docs-text-secondary)',
+        marginBottom: 40,
+        lineHeight: 1.6,
+    },
+    sectionHeading: {
+        fontSize: 22,
+        fontWeight: 600,
+        lineHeight: 1.6,
+        color: 'var(--docs-text-primary)',
+        marginBottom: 12,
+        marginTop: 40,
+        paddingTop: 24,
+        borderTop: '1px solid var(--docs-border)',
+        scrollMarginTop: 80,
+    },
+    sectionDescription: {
+        fontSize: 15,
+        color: 'var(--docs-text-secondary)',
+        lineHeight: 1.65,
+        marginBottom: 20,
+    },
+};
+/** Anchor id for a heading — accents folded so French titles keep readable ids ('États' → 'etats') */
+export function slugify(text) {
+    return text
+        .normalize('NFD')
+        .replace(/[̀-ͯ]/g, '')
+        .toLowerCase()
+        .trim()
+        .replace(/\s+/g, '-')
+        .replace(/[^a-z0-9-]/g, '');
+}

package/dist/vite/extractProps.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from '../components/PropsTable.js';
+export type { ComponentProps };
+export interface ExtractOptions {
+    /** tsconfig used to type-check the components — defaults to sensible JSX compiler options */
+    tsconfig?: string;
+}
+export declare function createPropsExtractor({ tsconfig }?: ExtractOptions): (files: string[]) => ComponentProps;
+//# sourceMappingURL=extractProps.d.ts.map

package/dist/vite/extractProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractProps.d.ts","sourceRoot":"","sources":["../../src/vite/extractProps.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAW,MAAM,6BAA6B,CAAA;AAE1E,YAAY,EAAE,cAAc,EAAE,CAAA;AAE9B,MAAM,WAAW,cAAc;IAC7B,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AA0ED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAE,cAAmB,IAI5D,OAAO,MAAM,EAAE,KAAG,cAAc,CACzC"}