@supersoniks/concorde 5.0.0 → 5.0.1

package/docs/src/core/components/ui/table/table.md

@@ -1,455 +0,0 @@
-# Table
-
-## Basic usage
-
-<sonic-code>
-  <template>
-    <sonic-table>
-      <sonic-tr>
-        <sonic-th>Id</sonic-th>
-        <sonic-th>Name</sonic-th>
-        <sonic-th>Email</sonic-th>
-      </sonic-tr>
-      <sonic-tr>
-        <sonic-td>1</sonic-td>
-        <sonic-td>George Bluth</sonic-td>
-        <sonic-td>george.bluth@reqres.in</sonic-td>
-      </sonic-tr>
-      <sonic-tr>
-        <sonic-td>2</sonic-td>
-        <sonic-td>Janet Weaver</sonic-td>
-        <sonic-td>janet.weaver@reqres.in</sonic-td>
-      </sonic-tr>
-      <sonic-tr>
-        <sonic-td>3</sonic-td>
-        <sonic-td>Emma Wong</sonic-td>
-        <sonic-td>emma.wong@reqres.in</sonic-td>
-      </sonic-tr>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## List / fetch
-
-<sonic-code>
-  <template>
-    <sonic-table>
-      <sonic-thead>
-        <sonic-tr>
-          <sonic-th>Id</sonic-th>
-          <sonic-th>Name</sonic-th>
-          <sonic-th>Email</sonic-th>
-        </sonic-tr> 
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-list debug fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
-          <template>
-            <sonic-tr>
-              <sonic-td data-bind ::inner-html="$id"></sonic-td>
-              <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
-              <sonic-td data-bind ::inner-html="$email"></sonic-td>
-            </sonic-tr>
-          </template>
-        <sonic-list>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## Size
-
-<sonic-code>
-  <template>
-    <div class="grid grid-cols-4 gap-3">
-      <sonic-table size="2xs" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">2xs</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="xs" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">xs</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="sm" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">sm</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="md" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">md</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">default</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="lg" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">lg</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="xl" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">xl</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="2xl" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">2xl</sonic-td></sonic-tr>
-      </sonic-table>
-    </div>
-  </template>
-</sonic-code>
-
-## Bordered
-
-<sonic-code>
-  <template>
-    <sonic-table bordered>
-      <sonic-thead>
-        <sonic-tr>
-          <sonic-th>Id</sonic-th>
-          <sonic-th>Name</sonic-th>
-          <sonic-th>Email</sonic-th>
-        </sonic-tr>
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-tr>
-          <sonic-td>1</sonic-td>
-          <sonic-td>George Bluth</sonic-td>
-          <sonic-td>george.bluth@reqres.in</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>2</sonic-td>
-          <sonic-td>Janet Weaver</sonic-td>
-          <sonic-td>janet.weaver@reqres.in</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>3</sonic-td>
-          <sonic-td>Emma Wong</sonic-td>
-          <sonic-td>emma.wong@reqres.in</sonic-td>
-        </sonic-tr>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## MaxHeight
-
-<sonic-code>
-  <template>
-    <sonic-table maxHeight="8rem">
-      <sonic-thead>
-        <sonic-tr>
-          <sonic-th>Id</sonic-th>
-          <sonic-th>Name</sonic-th>
-          <sonic-th>Email</sonic-th>
-        </sonic-tr> 
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-list  fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
-          <template>
-            <sonic-tr>
-              <sonic-td data-bind ::inner-html="$id"></sonic-td>
-              <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
-              <sonic-td data-bind ::inner-html="$email"></sonic-td>
-            </sonic-tr>
-          </template>
-        <sonic-list>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## Type
-
-Values available : primary, info, success, warning, danger
-
-<sonic-code>
-  <template>
-    <sonic-table bordered>
-        <sonic-tr>
-          <sonic-th type="info">Attribute type set on</sonic-th>
-          <sonic-th type="info">sonic-th</sonic-th>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td type="danger">Attribute type set on</sonic-td>
-          <sonic-td type="danger">sonic-td</sonic-td>
-        </sonic-tr>
-        <sonic-tr type="success">
-          <sonic-td>Attribute type set on</sonic-td>
-          <sonic-td>sonic-tr</sonic-td>
-        </sonic-tr>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## Colspan / rowspan
-
-<sonic-code>
-  <template>
-    <sonic-table >
-      <sonic-tbody>
-        <sonic-tr>
-          <sonic-td colspan="2" class="bg-info text-neutral-0">colspan : 2</sonic-td>
-          <sonic-td>cell</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>cell</sonic-td>
-          <sonic-td>cell</sonic-td>
-          <sonic-td rowspan="2" class="bg-success text-neutral-0">rowspan : 2</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>cell</sonic-td>
-          <sonic-td>cell</sonic-td>
-        </sonic-tr>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## Cell style attributes
-
-The following attributes will be used to set the style of the component :  
-- align
-- minWidth
-- maxWidth
-- width
-
-<sonic-code>
-  <template>
-    <sonic-table bordered>
-      <sonic-thead>
-        <sonic-tr>
-          <sonic-th width="7rem">align</sonic-th>
-          <sonic-th minWidth="20rem">minWidth</sonic-th>
-          <sonic-th>maxWidth</sonic-th>
-          <sonic-th>width</sonic-th>
-        </sonic-tr>
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-tr>
-          <sonic-td align="left">Left</sonic-td>
-          <sonic-td>20rem</sonic-td>
-          <sonic-td>5rem</sonic-td>
-          <sonic-td>15rem</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td align="center">center</sonic-td>
-          <sonic-td>20rem</sonic-td>
-          <sonic-td maxWidth="5rem">5rem</sonic-td>
-          <sonic-td>15rem</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td align="right">right</sonic-td>
-          <sonic-td>20rem</sonic-td>
-          <sonic-td>5rem - Lorem ipsum dolor</sonic-td>
-          <sonic-td width="60rem">15rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sollicitudin mollis. Curabitur sit amet nibh diam. Vivamus a pharetra mauris.</sonic-td>
-        </sonic-tr>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-
-## Responsive
-
-Every table is responsive by default
-
-<sonic-code>
-  <template>
-    <sonic-table bordered>
-      <sonic-thead>
-        <sonic-tr>
-          <sonic-th>Id</sonic-th>
-          <sonic-th>Name</sonic-th>
-          <sonic-th>Email</sonic-th>
-          <sonic-th>Comment</sonic-th>
-        </sonic-tr> 
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-list fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
-          <template>
-            <sonic-tr>
-              <sonic-td data-bind ::inner-html="$id"></sonic-td>
-              <sonic-td minWidth="10rem" data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
-              <sonic-td data-bind ::inner-html="$email"></sonic-td>
-              <sonic-td minWidth="40rem">
-                hasellus suscipit vulputate lacus, in tempor turpis aliquam vel. Nunc eleifend, velit id ultrices elementum, ipsum felis porttitor dui, id laoreet diam nulla sed urna. 
-              </sonic-td>
-            </sonic-tr>
-          </template>
-        <sonic-list>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-
-## Sticky header
-
-<sonic-code>
-  <template>
-    <sonic-table bordered noCustomScroll>
-      <sonic-thead class="sticky top-16">
-        <sonic-tr>
-          <sonic-th minWidth="max(20ch,12rem)">Company</sonic-th>
-          <sonic-th type="success">Contact</sonic-th>
-          <sonic-th>Country</sonic-th>
-          <sonic-th align="center">Quantity</sonic-th>
-          <sonic-th align="right">Price</sonic-th>
-          <sonic-th></sonic-th>
-        </sonic-tr>
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-tr>
-          <sonic-td>Alfreds Futterkiste</sonic-td>
-          <sonic-td>Maria Anders</sonic-td>
-          <sonic-td>Germany</sonic-td>
-          <sonic-td align="center">2</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Centro comercial Moctezuma</sonic-td>
-          <sonic-td
-            colspan="2"
-            align="center"
-            class="
-              text-center
-              text-neutral-400
-            "
-            >no information yet</sonic-td
-          >
-          <sonic-td align="center">3</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Ernst Handel</sonic-td>
-          <sonic-td>Roland Mendel</sonic-td>
-          <sonic-td>Austria</sonic-td>
-          <sonic-td align="center">4</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Island Trading</sonic-td>
-          <sonic-td>Helen Bennett</sonic-td>
-          <sonic-td>UK</sonic-td>
-          <sonic-td align="center">1</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr type="warning">
-          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
-          <sonic-td>Yoshi Tannamuri</sonic-td>
-          <sonic-td>Canada</sonic-td>
-          <sonic-td align="center">0</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
-          <sonic-td>Giovanni Rovelli</sonic-td>
-          <sonic-td type="danger">Italy</sonic-td>
-          <sonic-td align="center">20</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Alfreds Futterkiste</sonic-td>
-          <sonic-td>Maria Anders</sonic-td>
-          <sonic-td>Germany</sonic-td>
-          <sonic-td align="center">2</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Centro comercial Moctezuma</sonic-td>
-          <sonic-td
-            colspan="2"
-            align="center"
-            class="
-              text-center
-              text-neutral-400
-            "
-            >no information yet</sonic-td
-          >
-          <sonic-td align="center">3</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Ernst Handel</sonic-td>
-          <sonic-td>Roland Mendel</sonic-td>
-          <sonic-td>Austria</sonic-td>
-          <sonic-td align="center">4</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Island Trading</sonic-td>
-          <sonic-td>Helen Bennett</sonic-td>
-          <sonic-td>UK</sonic-td>
-          <sonic-td align="center">1</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr type="warning">
-          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
-          <sonic-td>Yoshi Tannamuri</sonic-td>
-          <sonic-td>Canada</sonic-td>
-          <sonic-td align="center">0</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
-          <sonic-td>Giovanni Rovelli</sonic-td>
-          <sonic-td>Italy</sonic-td>
-          <sonic-td align="center">20</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-      </sonic-tbody>
-      <sonic-caption>table caption</sonic-caption>
-    </sonic-table>
-  </template>
-</sonic-code>

package/docs/src/core/components/ui/toast/toast.md

@@ -1,166 +0,0 @@
-# Toast
-
-## Utilisation de base
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="window.SonicToast.add({ text: 'Message de notification simple' })">
-      Afficher un toast
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## Statut
-
-Les statuts disponibles sont : `success`, `error`, `warning`, `info` ou vide (par défaut).
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="window.SonicToast.add({ text: 'Message par défaut', status: '' })">
-        Default
-      </sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Opération réussie !', status: 'success' })">
-        Success
-      </sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Une erreur est survenue', status: 'error' })">
-        Error
-      </sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Attention à ce point', status: 'warning' })">
-        Warning
-      </sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Information importante', status: 'info' })">
-        Info
-      </sonic-button>
-    </div>
-  </template>
-</sonic-code>
-
-## Avec titre
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="window.SonicToast.add({ title: 'Succès', text: 'Votre demande a été traitée avec succès.', status: 'success' })">
-        Toast avec titre
-      </sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ title: 'Test', text: 'Une erreur est survenue lors du traitement.', status: 'error' })">
-        Toast d'erreur avec titre
-      </sonic-button>
-    </div>
-  </template>
-</sonic-code>
-
-## Avec contenu HTML
-
-Le contenu du toast peut contenir du HTML.
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="window.SonicToast.add({ text: 'Message avec <strong>HTML</strong> et un <a href=&quot;#&quot;>lien cliquable</a>', status: 'info' })">
-      Toast avec HTML
-    </sonic-button>
-  </template>
-</sonic-code>
-
-
-## Persistance
-
-Par défaut, les toasts disparaissent automatiquement. Avec `preserve: true`, le toast reste affiché jusqu'à ce qu'il soit fermé manuellement.
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="window.SonicToast.add({ text: 'Ce toast ne disparaîtra pas automatiquement', status: 'info', preserve: true })">
-      Toast persistant
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## Masquer définitivement
-
-Avec `dismissForever: true` et un `id`, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="window.SonicToast.add({ id: 'unique-toast-id', text: 'Ce toast peut être masqué définitivement', status: 'info', dismissForever: true })">
-      Toast avec dismiss forever
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## Fantôme
-
-Avec `ghost: true`, le toast devient semi-transparent et non-interactif.
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="window.SonicToast.add({ text: 'Toast fantôme (semi-transparent)', status: 'info', ghost: true })">
-      Toast ghost
-    </sonic-button>
-  </template>
-</sonic-code>
-
-
-## Méthodes de suppression
-
-### Tout supprimer
-
-Supprime tous les toasts sauf ceux marqués comme `ghost`.
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 1', status: 'info' })">Ajouter toast 1</sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 2', status: 'success' })">Ajouter toast 2</sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 3', status: 'warning' })">Ajouter toast 3</sonic-button>
-      <sonic-button onclick="window.SonicToast.removeAll()">Supprimer tous</sonic-button>
-    </div>
-  </template>
-</sonic-code>
-
-### Supprimer par statut
-
-Supprime tous les toasts d'un statut spécifique.
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast success', status: 'success' })">Success</sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast error', status: 'error' })">Error</sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast warning', status: 'warning' })">Warning</sonic-button>
-      <sonic-button onclick="window.SonicToast.removeItemsByStatus('success')">Supprimer success</sonic-button>
-      <sonic-button onclick="window.SonicToast.removeItemsByStatus('error')">Supprimer error</sonic-button>
-    </div>
-  </template>
-</sonic-code>
-
-### Supprimer les éléments temporaires
-
-Supprime tous les toasts qui ne sont pas marqués comme `preserve`.
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast temporaire', status: 'info' })">Temporaire</sonic-button>
-      <sonic-button onclick="window.SonicToast.add({ text: 'Toast persistant', status: 'success', preserve: true })">Persistant</sonic-button>
-      <sonic-button onclick="window.SonicToast.removeTemporaryItems()">Supprimer temporaires</sonic-button>
-    </div>
-  </template>
-</sonic-code>
-
-## Exemple complet
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="window.SonicToast.add({ 
-      id: 'welcome-toast',
-      title: 'Bienvenue',
-      text: 'Bienvenue sur notre plateforme ! Vous pouvez commencer à explorer les fonctionnalités.',
-      status: 'success',
-      dismissForever: true
-    })">
-      Toast complet
-    </sonic-button>
-  </template>
-</sonic-code>
-