{"_id":"@arkkad/design-system","_rev":"3-e93ccd26e82fbbb58d49a81810b9947a","name":"@arkkad/design-system","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@arkkad/design-system","version":"0.1.0","_id":"@arkkad/design-system@0.1.0","maintainers":[{"name":"marvynarcade","email":"marvyn.arcade@gmail.com"}],"dist":{"shasum":"b73657b616e033b24a98b0a932fffaec9b875675","tarball":"https://registry.npmjs.org/@arkkad/design-system/-/design-system-0.1.0.tgz","fileCount":9,"integrity":"sha512-oNtiaV+DduYBRd1QcJuMGGG5mJseNONtdefccaNbkatozsM/WJ8VrByAxYSU2RCtt8+sa8xJYAPiDDzENZfJzQ==","signatures":[{"sig":"MEQCIH+KSXCMc+rENDfwhEMXb9SbJ2JhkQzr/9HEHVKgUIUlAiBr8pMWQ6uRYNKd6oHMmyFpm4JpEr8uHnPmz/I5jp/Tew==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":252921},"main":"tailwind.preset.js","exports":{".":"./tailwind.preset.js","./preset":"./tailwind.preset.js","./styles":"./dist/tailwind.css"},"private":false,"scripts":{"build":"tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ./dist/tailwind.css","dev:public":"tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ../../public/assets/style/design-system.css --watch","build:public":"tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ../../public/assets/style/design-system.css"},"_npmUser":{"name":"marvynarcade","email":"marvyn.arcade@gmail.com"},"_npmVersion":"10.8.2","description":"Design system TailwindCSS réutilisable sous forme de preset + CSS compilé.","directories":{},"_nodeVersion":"20.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tailwindcss":"3.4.17"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.0_1770558807305_0.14058510962640125","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@arkkad/design-system","version":"0.1.1","_id":"@arkkad/design-system@0.1.1","maintainers":[{"name":"marvynarcade","email":"marvyn.arcade@gmail.com"}],"dist":{"shasum":"fb6f286f733eb56e431c4ed6f29b498be6388206","tarball":"https://registry.npmjs.org/@arkkad/design-system/-/design-system-0.1.1.tgz","fileCount":9,"integrity":"sha512-EAu4Pg+qfWpdfzAft+iFEhUsyH7iKA7kQJVyGxiIPdIhqLya1sj7qv6r0E0a3J8bVDvjIzFU4VAy2p/POb8Hbw==","signatures":[{"sig":"MEUCIQD1lDqsisVUlNEetvWAKUL/Cbz1rUSjU0hjknLgr6lG6wIgGwoETtmzJIb0ItgRdBxhGTHLCrtXD6ov5GAJ3QOgMqk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":257434},"main":"tailwind.preset.js","exports":{".":"./tailwind.preset.js","./preset":"./tailwind.preset.js","./styles":"./dist/tailwind.css"},"private":false,"scripts":{"build":"tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ./dist/tailwind.css","dev:public":"tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ../../public/assets/style/design-system.css --watch","build:public":"tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ../../public/assets/style/design-system.css"},"_npmUser":{"name":"marvynarcade","email":"marvyn.arcade@gmail.com"},"_npmVersion":"10.8.2","description":"Design system TailwindCSS réutilisable pour tous les produits Arkkad. Objectif : cohérence, rapidité d’exécution, et identité visuelle claire.","directories":{},"_nodeVersion":"20.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tailwindcss":"3.4.17"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.1_1770559727154_0.3798337190273078","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@arkkad/design-system","version":"0.1.2","private":false,"publishConfig":{"access":"public"},"main":"tailwind.preset.js","exports":{".":"./tailwind.preset.js","./preset":"./tailwind.preset.js","./styles":"./dist/tailwind.css"},"devDependencies":{"tailwindcss":"3.4.17"},"scripts":{"build":"tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ./dist/tailwind.css","build:public":"tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ../../public/assets/style/design-system.css","dev:public":"tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ../../public/assets/style/design-system.css --watch"},"_id":"@arkkad/design-system@0.1.2","description":"Design system TailwindCSS réutilisable pour tous les produits Arkkad. Objectif : cohérence, rapidité d’exécution, et identité visuelle claire.","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-lg1/wlHFYQBBVE+xDBcByWROyJUuYR0H3xld90EwvGDgqXw6SxCshj4hKaZh5erw9C6LNcDxRhzjgtzBieGphA==","shasum":"9227b223aa430fdaaa20e4d5e134a42bbf48aeac","tarball":"https://registry.npmjs.org/@arkkad/design-system/-/design-system-0.1.2.tgz","fileCount":10,"unpackedSize":365383,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCe6EFFOa3nwDMCN6KzjqfsgnvDp9yWb4BIo5IWBsBxTwIgeXfGtfWKSgGC+tN4asS9ySOQek0GApFl5DlruqsseWs="}]},"_npmUser":{"name":"marvynarcade","email":"marvyn.arcade@gmail.com"},"directories":{},"maintainers":[{"name":"marvynarcade","email":"marvyn.arcade@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.1.2_1770572481987_0.5088804167272887"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-08T13:53:26.902Z","modified":"2026-02-08T17:41:22.323Z","0.1.0":"2026-02-08T13:53:27.477Z","0.1.1":"2026-02-08T14:08:47.379Z","0.1.2":"2026-02-08T17:41:22.181Z"},"description":"Design system TailwindCSS réutilisable pour tous les produits Arkkad. Objectif : cohérence, rapidité d’exécution, et identité visuelle claire.","maintainers":[{"name":"marvynarcade","email":"marvyn.arcade@gmail.com"}],"readme":"# Arkkad Design System\n\nDesign system TailwindCSS réutilisable pour tous les produits Arkkad.\nObjectif : cohérence, rapidité d’exécution, et identité visuelle claire.\n\n## Installation\n\nDepuis npm :\n\n```bash\nnpm i @arkkad/design-system\n```\n\nDepuis ce repo :\n\n```bash\nnpm install\n```\n\n## Build du CSS\n\n```bash\nnpm run build\n```\n\nLe fichier généré :\n- `dist/tailwind.css`\n\n## Utilisation dans un projet\n\n1. Installer le package (workspace ou via repo).\n2. Ajouter le preset dans `tailwind.config.js`.\n3. Importer le CSS généré.\n\nExemple `tailwind.config.js` :\n\n```js\nmodule.exports = {\n  presets: [require(\"@arkkad/design-system/preset\")],\n  content: [\"./src/**/*.{html,js,ts,jsx,tsx,php}\"]\n};\n```\n\nImporter le CSS :\n\n```css\n@import \"@arkkad/design-system/styles\";\n```\n\n## Documentation\n\n### Principes\n\n- **Un produit = une couleur accent.**  \n  Chaque site doit définir sa propre `--color-accent`. Cela évite la confusion entre produits tout en gardant une base visuelle commune.\n- **Structure constante.**  \n  La sidebar/aside doit rester la même (logo + bouton de réduction en haut, navigation par catégories, module compte en bas).\n- **Typo unique.**  \n  OTSono est la police officielle (Regular pour le corps, Medium pour les titres).\n- **Pas d’ombres.**  \n  Aucune `box-shadow` dans le DS (choix volontaire pour un look net et sobre).\n\n### Tokens de base\n\n```css\n:root {\n  --color-text: #14140f;\n  --color-card: #ffffff;\n  --color-accent: #2e5dff; /* à changer par produit */\n}\n```\n\n### Sidebar / Aside (structure obligatoire)\n\nStructure attendue :\n1. En haut : logo + bouton de réduction\n2. Navigation par catégories (dropdowns)\n3. En bas : module compte (infos, paramètres, déconnexion)\n\nLe layout est standardisé dans `src/components/base/header.php`.\n\n**Exemple de sidebar :**\n\n```html\n<aside class=\"sidebar flex w-72 flex-col border-r border-[#f5f5eb] bg-white text-[var(--color-text)] min-h-screen\">\n  <div class=\"flex items-center justify-between border-b border-[#f5f5eb] px-6 py-5\">\n    <div class=\"flex items-center gap-3\">\n      <div class=\"flex h-10 w-10 items-center justify-center rounded-md bg-[var(--color-accent)] text-white font-medium\">A</div>\n      <div class=\"sidebar-text\">\n        <h1 class=\"text-lg font-medium\">Arkkad</h1>\n        <p class=\"text-xs text-black/50\">Legal Operations</p>\n      </div>\n    </div>\n    <button class=\"btn-ghost px-2 py-1 text-xs\" type=\"button\" data-sidebar-toggle aria-label=\"Réduire le menu\">←</button>\n  </div>\n\n  <nav class=\"flex-1 overflow-y-auto px-4 py-6 space-y-4\">\n    <details open class=\"group\">\n      <summary class=\"flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs font-medium uppercase tracking-[0.2em] text-black/50 hover:text-black/70\">\n        <span class=\"sidebar-section\">Pilotage</span>\n        <span class=\"text-[10px] transition group-open:rotate-180\">⌄</span>\n      </summary>\n      <div class=\"mt-2 space-y-1\">\n        <a href=\"#\" class=\"flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60\">Dashboard</a>\n        <a href=\"#\" class=\"flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60\">Sociétés</a>\n        <a href=\"#\" class=\"flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60\">Documents</a>\n      </div>\n    </details>\n  </nav>\n\n  <div class=\"border-t border-[#f5f5eb] p-4\">\n    <div class=\"rounded-md border border-[#f5f5eb] bg-white p-4 space-y-2\">\n      <div class=\"sidebar-section text-xs font-medium uppercase tracking-[0.2em] text-black/50\">Compte</div>\n      <a href=\"#\" class=\"flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60\">Infos</a>\n      <a href=\"#\" class=\"flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60\">Paramètres</a>\n      <a href=\"#\" class=\"flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60\">Déconnexion</a>\n    </div>\n  </div>\n</aside>\n```\n\n### Pages d’auth\n\nLes pages d’auth doivent suivre le même style DS :\n- fond clair\n- cartes / forms avec `.card`\n- inputs `.input`\n- boutons `.btn-primary`\n\nSi besoin, duplique la structure de `views/login.php` et conserve les classes DS.\n\n### Nouveautés (dernière version)\n\n- Tableaux avancés (toolbar, sélection, tri)\n- Charts (line, bars, donut, sparkline)\n- Icônes unifiées + chips\n- Asides et templates auth\n- Dropdown + pseudo-select (dropdown custom)\n- Timelines, calendriers, progress bars\n- Filtres et listes d’items en carte\n- Skeleton loaders, switch, tags input, multi-select\n- Breadcrumb, context menu, file upload\n- Border-radius badges/chips: 4px\n\n### Composants principaux\n\n**Buttons**\n- `.btn`, `.btn-primary`, `.btn-ghost`\n\n**Inputs**\n- `.input`, `.select`, `.input-error`, `.input-help`, `.input-error-text`\n- `.select-dropdown`, `.select-trigger`, `.select-dropdown-menu`, `.select-option`\n\n**Cards**\n- `.card`\n\n**Badges / Tags**\n- `.badge`, `.badge-brand`, `.badge-soft`, `.badge-new`\n- `.badge-success`, `.badge-warning`, `.badge-error`\n- `.chip`, `.tag`, `.tags-input`\n\n**Tables**\n- `.table`, `.table-zebra`, `.table-compact`\n- `.table-cell-muted`, `.table-cell-strong`\n- `.table-shell`, `.table-toolbar`, `.table-sort`, `.table-check`\n\n**Alerts / Toasts**\n- `.alert`, `.alert-info`, `.alert-success`, `.alert-warning`, `.alert-danger`\n- `.toast`, `.toast-success`, `.toast-warning`, `.toast-error`\n\n**Layout**\n- `.navbar`, `.tabs`, `.tab`, `.tab-active`\n- `.aside-panel`, `.auth-shell`\n\n**Charts**\n- `.chart-card`, `.chart-grid`, `.chart-line`, `.chart-bars`, `.chart-donut`\n\n**Autres**\n- `.timeline`, `.calendar`, `.progress`\n- `.filter-bar`, `.item-card`, `.dropdown`\n- `.skeleton`, `.switch`, `.breadcrumb`\n- `.context-menu`, `.upload`\n\n### Bonnes pratiques\n\n- Toujours utiliser `.card` pour les blocs de contenu.\n- Utiliser `.select` pour un `<select>` natif ou `.select-dropdown` pour un dropdown custom.\n- Utiliser `.btn-primary` pour l’action principale, `.btn-ghost` pour les actions secondaires.\n- Remplacer les `text-gray-*` par `text-[var(--color-text)]` ou `text-black/60`.\n\n## Police OTSono (auto)\n\nLe CSS du design system inclut les `@font-face` OTSono.  \nLes fichiers `.woff/.woff2` sont packagés dans `@arkkad/design-system/assets/fonts/OTSono`.\n\nSi ton bundler gère les assets (Vite, Webpack, etc.), l'import du CSS suffit.  \nSinon, il faut copier ce dossier dans un chemin public et ajuster les URLs dans `src/tailwind.css`.\n\n## Variables de thème\n\nTu peux changer l’accent par site sans modifier le design system :\n\n```css\n:root {\n  --color-accent: #ff6b00;\n}\n```\n\nValeurs par défaut :\n- `--color-text: #14140f`\n- `--color-card: #ffffff`\n- `--color-accent: #2e5dff`\n\n## Démo rapide\n\n1. Builder le CSS.\n2. Ouvrir `demo/index.html` dans un navigateur.\n\n## Notes\n\n- La police OTSono est embarquée via `@font-face` dans le CSS.\n- Les composants de base incluent `btn`, `btn-primary`, `btn-ghost`, `card`, `input`, `select`.\n","readmeFilename":"README.md"}