zuii 1.4.6 → 1.4.8

package/README.md

@@ -38,13 +38,12 @@ npm install zuii
 
 1.  **`vendor`** (Priorité basse) : Pour les frameworks externes (ex: Bootstrap).
 2.  **`components`** : Pour les composants **zuii**.
-3.  **`utilities`** : Pour les classes utilitaires de **zuii**.
+3.  **`layout`** : Pour les styles de bas niveau de **zuii**.
+4.  **`utilities`** : Pour les classes utilitaires de **zuii**.
 
 #### Exemple d'implémentation dans votre `main.scss` :
 
 ```scss
-@layer vendor, components, utilities;
-
 $prefix: "";
 $enable-important-utilities: false;
 

package/dist/components/Button/react/index.d.ts

@@ -32,5 +32,5 @@ interface Props extends Omit<ButtonProps, "size"> {
  * @param {Props} props - Les propriétés du composant.
  * @returns {JSX.Element} Le composant bouton rendu.
  */
-export declare const Button: ({ children, variant, reverse, size, icon, btnIcon, transparent, className, ...props }: Props & ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ children, variant, reverse, size, icon, btnIcon, transparent, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Button/style/index.css

@@ -1 +1 @@
-@layer components{.btn{background-color:var(--primary);color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-bg: var(--primary-dark);--btn-hover-border-color: var(--primary-dark);--btn-active-bg: var(--primary-dark);--btn-active-border-color: var(--primary-dark);--btn-disabled-bg: var(--primary);--btn-disabled-border-color: var(--primary);height:fit-content;display:flex;gap:.3rem}.btn:hover,.btn:focus{box-shadow:var(--box-shadow-md)}.btn-content{display:flex;line-height:initial;gap:.3rem;align-items:center}.btn-icon{display:flex;line-height:initial;justify-content:center;align-items:center;padding:.4rem}.btn-icon .btn-content{flex-direction:column}.btn-reverse{flex-direction:row-reverse}.btn-primary{background-color:rgba(var(--primary-rgb),var(--bg-opacity, 1));color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary);--btn-active-border-color: var(--primary)}.btn-primary-light{background-color:rgba(var(--primary-light-rgb),var(--bg-opacity, 1));color:var(--primary-light-contrast);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-primary-dark{background-color:rgba(var(--primary-dark-rgb),var(--bg-opacity, 1));color:var(--primary-dark-contrast);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-outline-primary{background-color:rgba(var(--primary-rgb),var(--bg-opacity, 1));color:var(--primary-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-light{background-color:rgba(var(--primary-light-rgb),var(--bg-opacity, 1));color:var(--primary-light-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-dark{background-color:rgba(var(--primary-dark-rgb),var(--bg-opacity, 1));color:var(--primary-dark-contrast);background:transparent;color:var(--primary-dark);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-secondary{background-color:rgba(var(--secondary-rgb),var(--bg-opacity, 1));color:var(--secondary-contrast);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary);--btn-active-border-color: var(--secondary)}.btn-secondary-light{background-color:rgba(var(--secondary-light-rgb),var(--bg-opacity, 1));color:var(--secondary-light-contrast);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-secondary-dark{background-color:rgba(var(--secondary-dark-rgb),var(--bg-opacity, 1));color:var(--secondary-dark-contrast);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-outline-secondary{background-color:rgba(var(--secondary-rgb),var(--bg-opacity, 1));color:var(--secondary-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-light{background-color:rgba(var(--secondary-light-rgb),var(--bg-opacity, 1));color:var(--secondary-light-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-dark{background-color:rgba(var(--secondary-dark-rgb),var(--bg-opacity, 1));color:var(--secondary-dark-contrast);background:transparent;color:var(--secondary-dark);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-accent{background-color:rgba(var(--accent-rgb),var(--bg-opacity, 1));color:var(--accent-contrast);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent);--btn-active-border-color: var(--accent)}.btn-accent-light{background-color:rgba(var(--accent-light-rgb),var(--bg-opacity, 1));color:var(--accent-light-contrast);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-accent-dark{background-color:rgba(var(--accent-dark-rgb),var(--bg-opacity, 1));color:var(--accent-dark-contrast);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-outline-accent{background-color:rgba(var(--accent-rgb),var(--bg-opacity, 1));color:var(--accent-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-light{background-color:rgba(var(--accent-light-rgb),var(--bg-opacity, 1));color:var(--accent-light-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-dark{background-color:rgba(var(--accent-dark-rgb),var(--bg-opacity, 1));color:var(--accent-dark-contrast);background:transparent;color:var(--accent-dark);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-tertiary{background-color:rgba(var(--tertiary-rgb),var(--bg-opacity, 1));color:var(--tertiary-contrast);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary);--btn-active-border-color: var(--tertiary)}.btn-tertiary-light{background-color:rgba(var(--tertiary-light-rgb),var(--bg-opacity, 1));color:var(--tertiary-light-contrast);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-tertiary-dark{background-color:rgba(var(--tertiary-dark-rgb),var(--bg-opacity, 1));color:var(--tertiary-dark-contrast);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-outline-tertiary{background-color:rgba(var(--tertiary-rgb),var(--bg-opacity, 1));color:var(--tertiary-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-light{background-color:rgba(var(--tertiary-light-rgb),var(--bg-opacity, 1));color:var(--tertiary-light-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-dark{background-color:rgba(var(--tertiary-dark-rgb),var(--bg-opacity, 1));color:var(--tertiary-dark-contrast);background:transparent;color:var(--tertiary-dark);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-success{background-color:rgba(var(--success-rgb),var(--bg-opacity, 1));color:var(--success-contrast);--btn-border-color: var(--success);--btn-hover-border-color: var(--success);--btn-active-border-color: var(--success)}.btn-success-light{background-color:rgba(var(--success-light-rgb),var(--bg-opacity, 1));color:var(--success-light-contrast);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-success-dark{background-color:rgba(var(--success-dark-rgb),var(--bg-opacity, 1));color:var(--success-dark-contrast);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-outline-success{background-color:rgba(var(--success-rgb),var(--bg-opacity, 1));color:var(--success-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-light{background-color:rgba(var(--success-light-rgb),var(--bg-opacity, 1));color:var(--success-light-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-dark{background-color:rgba(var(--success-dark-rgb),var(--bg-opacity, 1));color:var(--success-dark-contrast);background:transparent;color:var(--success-dark);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-danger{background-color:rgba(var(--danger-rgb),var(--bg-opacity, 1));color:var(--danger-contrast);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger);--btn-active-border-color: var(--danger)}.btn-danger-light{background-color:rgba(var(--danger-light-rgb),var(--bg-opacity, 1));color:var(--danger-light-contrast);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-danger-dark{background-color:rgba(var(--danger-dark-rgb),var(--bg-opacity, 1));color:var(--danger-dark-contrast);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-outline-danger{background-color:rgba(var(--danger-rgb),var(--bg-opacity, 1));color:var(--danger-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-light{background-color:rgba(var(--danger-light-rgb),var(--bg-opacity, 1));color:var(--danger-light-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-dark{background-color:rgba(var(--danger-dark-rgb),var(--bg-opacity, 1));color:var(--danger-dark-contrast);background:transparent;color:var(--danger-dark);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-warning{background-color:rgba(var(--warning-rgb),var(--bg-opacity, 1));color:var(--warning-contrast);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning);--btn-active-border-color: var(--warning)}.btn-warning-light{background-color:rgba(var(--warning-light-rgb),var(--bg-opacity, 1));color:var(--warning-light-contrast);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-warning-dark{background-color:rgba(var(--warning-dark-rgb),var(--bg-opacity, 1));color:var(--warning-dark-contrast);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-outline-warning{background-color:rgba(var(--warning-rgb),var(--bg-opacity, 1));color:var(--warning-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-light{background-color:rgba(var(--warning-light-rgb),var(--bg-opacity, 1));color:var(--warning-light-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-dark{background-color:rgba(var(--warning-dark-rgb),var(--bg-opacity, 1));color:var(--warning-dark-contrast);background:transparent;color:var(--warning-dark);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-info{background-color:rgba(var(--info-rgb),var(--bg-opacity, 1));color:var(--info-contrast);--btn-border-color: var(--info);--btn-hover-border-color: var(--info);--btn-active-border-color: var(--info)}.btn-info-light{background-color:rgba(var(--info-light-rgb),var(--bg-opacity, 1));color:var(--info-light-contrast);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-info-dark{background-color:rgba(var(--info-dark-rgb),var(--bg-opacity, 1));color:var(--info-dark-contrast);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-outline-info{background-color:rgba(var(--info-rgb),var(--bg-opacity, 1));color:var(--info-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-light{background-color:rgba(var(--info-light-rgb),var(--bg-opacity, 1));color:var(--info-light-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-dark{background-color:rgba(var(--info-dark-rgb),var(--bg-opacity, 1));color:var(--info-dark-contrast);background:transparent;color:var(--info-dark);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-light{background-color:rgba(var(--light-rgb),var(--bg-opacity, 1));color:var(--light-contrast);--btn-border-color: var(--light);--btn-hover-border-color: var(--light);--btn-active-border-color: var(--light)}.btn-light-light{background-color:rgba(var(--light-light-rgb),var(--bg-opacity, 1));color:var(--light-light-contrast);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-light-dark{background-color:rgba(var(--light-dark-rgb),var(--bg-opacity, 1));color:var(--light-dark-contrast);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-outline-light{background-color:rgba(var(--light-rgb),var(--bg-opacity, 1));color:var(--light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-light{background-color:rgba(var(--light-light-rgb),var(--bg-opacity, 1));color:var(--light-light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-dark{background-color:rgba(var(--light-dark-rgb),var(--bg-opacity, 1));color:var(--light-dark-contrast);background:transparent;color:var(--light-dark);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-dark{background-color:rgba(var(--dark-rgb),var(--bg-opacity, 1));color:var(--dark-contrast);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark);--btn-active-border-color: var(--dark)}.btn-dark-light{background-color:rgba(var(--dark-light-rgb),var(--bg-opacity, 1));color:var(--dark-light-contrast);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-dark-dark{background-color:rgba(var(--dark-dark-rgb),var(--bg-opacity, 1));color:var(--dark-dark-contrast);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-outline-dark{background-color:rgba(var(--dark-rgb),var(--bg-opacity, 1));color:var(--dark-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-light{background-color:rgba(var(--dark-light-rgb),var(--bg-opacity, 1));color:var(--dark-light-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-dark{background-color:rgba(var(--dark-dark-rgb),var(--bg-opacity, 1));color:var(--dark-dark-contrast);background:transparent;color:var(--dark-dark);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-transparent{background:transparent;border:none;color:currentColor}.btn-transparent:hover{box-shadow:none}.btn-none{--btn-font-size: calc(var(--spacing-none) * 0);--btn-padding-y: calc(var(--spacing-none) * 0 * .5);--btn-padding-x: calc(var(--spacing-none) * 0);--btn-border-radius: var(--border-radius)}.btn-xs{--btn-font-size: calc(var(--spacing-xs) * 3);--btn-padding-y: calc(var(--spacing-xs) * 3 * .5);--btn-padding-x: calc(var(--spacing-xs) * 3);--btn-border-radius: var(--border-radius)}.btn-sm{--btn-font-size: calc(var(--spacing-sm) * 1.75);--btn-padding-y: calc(var(--spacing-sm) * 1.75 * .5);--btn-padding-x: calc(var(--spacing-sm) * 1.75);--btn-border-radius: var(--border-radius)}.btn-md{--btn-font-size: calc(var(--spacing-md) * 1);--btn-padding-y: calc(var(--spacing-md) * 1 * .5);--btn-padding-x: calc(var(--spacing-md) * 1);--btn-border-radius: var(--border-radius)}.btn-lg{--btn-font-size: calc(var(--spacing-lg) * .625);--btn-padding-y: calc(var(--spacing-lg) * .625 * .5);--btn-padding-x: calc(var(--spacing-lg) * .625);--btn-border-radius: var(--border-radius)}.btn-xl{--btn-font-size: calc(var(--spacing-xl) * .375);--btn-padding-y: calc(var(--spacing-xl) * .375 * .5);--btn-padding-x: calc(var(--spacing-xl) * .375);--btn-border-radius: var(--border-radius)}.btn-2xl{--btn-font-size: calc(var(--spacing-2xl) * .25);--btn-padding-y: calc(var(--spacing-2xl) * .25 * .5);--btn-padding-x: calc(var(--spacing-2xl) * .25);--btn-border-radius: var(--border-radius)}.btn-3xl{--btn-font-size: calc(var(--spacing-3xl) * .15);--btn-padding-y: calc(var(--spacing-3xl) * .15 * .5);--btn-padding-x: calc(var(--spacing-3xl) * .15);--btn-border-radius: var(--border-radius)}.btn-4xl{--btn-font-size: calc(var(--spacing-4xl) * .14);--btn-padding-y: calc(var(--spacing-4xl) * .14 * .5);--btn-padding-x: calc(var(--spacing-4xl) * .14);--btn-border-radius: var(--border-radius)}.btn-close{--btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");--btn-close-opacity: .5;--btn-close-hover-opacity: .75;--btn-close-focus-shadow: 0 0 0 .1rem var(--primary);--btn-close-focus-opacity: 1;--btn-close-disabled-opacity: .25;-webkit-mask-image:var(--btn-close-bg);mask-image:var(--btn-close-bg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}}
+@layer components{.btn{background-color:var(--primary);color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-bg: var(--primary-dark);--btn-hover-border-color: var(--primary-dark);--btn-active-bg: var(--primary-dark);--btn-active-border-color: var(--primary-dark);--btn-disabled-bg: var(--gray-300);--btn-disabled-border-color: var(--gray-300);height:fit-content;display:flex;gap:.3rem}.btn:hover,.btn:focus{box-shadow:var(--box-shadow-md)}.btn-content{display:flex;line-height:initial;gap:.3rem;align-items:center}.btn-icon{display:flex;line-height:initial;justify-content:center;align-items:center;padding:.4rem}.btn-icon .btn-content{flex-direction:column}.btn-reverse{flex-direction:row-reverse}.btn-primary{background-color:rgba(var(--primary-rgb),var(--bg-opacity, 1));color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary);--btn-active-border-color: var(--primary)}.btn-primary-light{background-color:rgba(var(--primary-light-rgb),var(--bg-opacity, 1));color:var(--primary-light-contrast);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-primary-dark{background-color:rgba(var(--primary-dark-rgb),var(--bg-opacity, 1));color:var(--primary-dark-contrast);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-outline-primary{background-color:rgba(var(--primary-rgb),var(--bg-opacity, 1));color:var(--primary-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-light{background-color:rgba(var(--primary-light-rgb),var(--bg-opacity, 1));color:var(--primary-light-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-dark{background-color:rgba(var(--primary-dark-rgb),var(--bg-opacity, 1));color:var(--primary-dark-contrast);background:transparent;color:var(--primary-dark);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-secondary{background-color:rgba(var(--secondary-rgb),var(--bg-opacity, 1));color:var(--secondary-contrast);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary);--btn-active-border-color: var(--secondary)}.btn-secondary-light{background-color:rgba(var(--secondary-light-rgb),var(--bg-opacity, 1));color:var(--secondary-light-contrast);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-secondary-dark{background-color:rgba(var(--secondary-dark-rgb),var(--bg-opacity, 1));color:var(--secondary-dark-contrast);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-outline-secondary{background-color:rgba(var(--secondary-rgb),var(--bg-opacity, 1));color:var(--secondary-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-light{background-color:rgba(var(--secondary-light-rgb),var(--bg-opacity, 1));color:var(--secondary-light-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-dark{background-color:rgba(var(--secondary-dark-rgb),var(--bg-opacity, 1));color:var(--secondary-dark-contrast);background:transparent;color:var(--secondary-dark);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-accent{background-color:rgba(var(--accent-rgb),var(--bg-opacity, 1));color:var(--accent-contrast);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent);--btn-active-border-color: var(--accent)}.btn-accent-light{background-color:rgba(var(--accent-light-rgb),var(--bg-opacity, 1));color:var(--accent-light-contrast);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-accent-dark{background-color:rgba(var(--accent-dark-rgb),var(--bg-opacity, 1));color:var(--accent-dark-contrast);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-outline-accent{background-color:rgba(var(--accent-rgb),var(--bg-opacity, 1));color:var(--accent-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-light{background-color:rgba(var(--accent-light-rgb),var(--bg-opacity, 1));color:var(--accent-light-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-dark{background-color:rgba(var(--accent-dark-rgb),var(--bg-opacity, 1));color:var(--accent-dark-contrast);background:transparent;color:var(--accent-dark);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-tertiary{background-color:rgba(var(--tertiary-rgb),var(--bg-opacity, 1));color:var(--tertiary-contrast);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary);--btn-active-border-color: var(--tertiary)}.btn-tertiary-light{background-color:rgba(var(--tertiary-light-rgb),var(--bg-opacity, 1));color:var(--tertiary-light-contrast);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-tertiary-dark{background-color:rgba(var(--tertiary-dark-rgb),var(--bg-opacity, 1));color:var(--tertiary-dark-contrast);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-outline-tertiary{background-color:rgba(var(--tertiary-rgb),var(--bg-opacity, 1));color:var(--tertiary-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-light{background-color:rgba(var(--tertiary-light-rgb),var(--bg-opacity, 1));color:var(--tertiary-light-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-dark{background-color:rgba(var(--tertiary-dark-rgb),var(--bg-opacity, 1));color:var(--tertiary-dark-contrast);background:transparent;color:var(--tertiary-dark);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-success{background-color:rgba(var(--success-rgb),var(--bg-opacity, 1));color:var(--success-contrast);--btn-border-color: var(--success);--btn-hover-border-color: var(--success);--btn-active-border-color: var(--success)}.btn-success-light{background-color:rgba(var(--success-light-rgb),var(--bg-opacity, 1));color:var(--success-light-contrast);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-success-dark{background-color:rgba(var(--success-dark-rgb),var(--bg-opacity, 1));color:var(--success-dark-contrast);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-outline-success{background-color:rgba(var(--success-rgb),var(--bg-opacity, 1));color:var(--success-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-light{background-color:rgba(var(--success-light-rgb),var(--bg-opacity, 1));color:var(--success-light-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-dark{background-color:rgba(var(--success-dark-rgb),var(--bg-opacity, 1));color:var(--success-dark-contrast);background:transparent;color:var(--success-dark);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-danger{background-color:rgba(var(--danger-rgb),var(--bg-opacity, 1));color:var(--danger-contrast);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger);--btn-active-border-color: var(--danger)}.btn-danger-light{background-color:rgba(var(--danger-light-rgb),var(--bg-opacity, 1));color:var(--danger-light-contrast);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-danger-dark{background-color:rgba(var(--danger-dark-rgb),var(--bg-opacity, 1));color:var(--danger-dark-contrast);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-outline-danger{background-color:rgba(var(--danger-rgb),var(--bg-opacity, 1));color:var(--danger-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-light{background-color:rgba(var(--danger-light-rgb),var(--bg-opacity, 1));color:var(--danger-light-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-dark{background-color:rgba(var(--danger-dark-rgb),var(--bg-opacity, 1));color:var(--danger-dark-contrast);background:transparent;color:var(--danger-dark);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-warning{background-color:rgba(var(--warning-rgb),var(--bg-opacity, 1));color:var(--warning-contrast);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning);--btn-active-border-color: var(--warning)}.btn-warning-light{background-color:rgba(var(--warning-light-rgb),var(--bg-opacity, 1));color:var(--warning-light-contrast);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-warning-dark{background-color:rgba(var(--warning-dark-rgb),var(--bg-opacity, 1));color:var(--warning-dark-contrast);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-outline-warning{background-color:rgba(var(--warning-rgb),var(--bg-opacity, 1));color:var(--warning-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-light{background-color:rgba(var(--warning-light-rgb),var(--bg-opacity, 1));color:var(--warning-light-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-dark{background-color:rgba(var(--warning-dark-rgb),var(--bg-opacity, 1));color:var(--warning-dark-contrast);background:transparent;color:var(--warning-dark);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-info{background-color:rgba(var(--info-rgb),var(--bg-opacity, 1));color:var(--info-contrast);--btn-border-color: var(--info);--btn-hover-border-color: var(--info);--btn-active-border-color: var(--info)}.btn-info-light{background-color:rgba(var(--info-light-rgb),var(--bg-opacity, 1));color:var(--info-light-contrast);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-info-dark{background-color:rgba(var(--info-dark-rgb),var(--bg-opacity, 1));color:var(--info-dark-contrast);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-outline-info{background-color:rgba(var(--info-rgb),var(--bg-opacity, 1));color:var(--info-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-light{background-color:rgba(var(--info-light-rgb),var(--bg-opacity, 1));color:var(--info-light-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-dark{background-color:rgba(var(--info-dark-rgb),var(--bg-opacity, 1));color:var(--info-dark-contrast);background:transparent;color:var(--info-dark);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-light{background-color:rgba(var(--light-rgb),var(--bg-opacity, 1));color:var(--light-contrast);--btn-border-color: var(--light);--btn-hover-border-color: var(--light);--btn-active-border-color: var(--light)}.btn-light-light{background-color:rgba(var(--light-light-rgb),var(--bg-opacity, 1));color:var(--light-light-contrast);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-light-dark{background-color:rgba(var(--light-dark-rgb),var(--bg-opacity, 1));color:var(--light-dark-contrast);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-outline-light{background-color:rgba(var(--light-rgb),var(--bg-opacity, 1));color:var(--light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-light{background-color:rgba(var(--light-light-rgb),var(--bg-opacity, 1));color:var(--light-light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-dark{background-color:rgba(var(--light-dark-rgb),var(--bg-opacity, 1));color:var(--light-dark-contrast);background:transparent;color:var(--light-dark);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-dark{background-color:rgba(var(--dark-rgb),var(--bg-opacity, 1));color:var(--dark-contrast);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark);--btn-active-border-color: var(--dark)}.btn-dark-light{background-color:rgba(var(--dark-light-rgb),var(--bg-opacity, 1));color:var(--dark-light-contrast);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-dark-dark{background-color:rgba(var(--dark-dark-rgb),var(--bg-opacity, 1));color:var(--dark-dark-contrast);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-outline-dark{background-color:rgba(var(--dark-rgb),var(--bg-opacity, 1));color:var(--dark-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-light{background-color:rgba(var(--dark-light-rgb),var(--bg-opacity, 1));color:var(--dark-light-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-dark{background-color:rgba(var(--dark-dark-rgb),var(--bg-opacity, 1));color:var(--dark-dark-contrast);background:transparent;color:var(--dark-dark);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-transparent{background:transparent;border:none;color:currentColor}.btn-transparent:hover{box-shadow:none}.btn-none{--btn-font-size: calc(var(--spacing-none) * 0);--btn-padding-y: calc(var(--spacing-none) * 0 * .5);--btn-padding-x: calc(var(--spacing-none) * 0);--btn-border-radius: var(--border-radius)}.btn-xs{--btn-font-size: calc(var(--spacing-xs) * 3);--btn-padding-y: calc(var(--spacing-xs) * 3 * .5);--btn-padding-x: calc(var(--spacing-xs) * 3);--btn-border-radius: var(--border-radius)}.btn-sm{--btn-font-size: calc(var(--spacing-sm) * 1.75);--btn-padding-y: calc(var(--spacing-sm) * 1.75 * .5);--btn-padding-x: calc(var(--spacing-sm) * 1.75);--btn-border-radius: var(--border-radius)}.btn-md{--btn-font-size: calc(var(--spacing-md) * 1);--btn-padding-y: calc(var(--spacing-md) * 1 * .5);--btn-padding-x: calc(var(--spacing-md) * 1);--btn-border-radius: var(--border-radius)}.btn-lg{--btn-font-size: calc(var(--spacing-lg) * .625);--btn-padding-y: calc(var(--spacing-lg) * .625 * .5);--btn-padding-x: calc(var(--spacing-lg) * .625);--btn-border-radius: var(--border-radius)}.btn-xl{--btn-font-size: calc(var(--spacing-xl) * .375);--btn-padding-y: calc(var(--spacing-xl) * .375 * .5);--btn-padding-x: calc(var(--spacing-xl) * .375);--btn-border-radius: var(--border-radius)}.btn-2xl{--btn-font-size: calc(var(--spacing-2xl) * .25);--btn-padding-y: calc(var(--spacing-2xl) * .25 * .5);--btn-padding-x: calc(var(--spacing-2xl) * .25);--btn-border-radius: var(--border-radius)}.btn-3xl{--btn-font-size: calc(var(--spacing-3xl) * .15);--btn-padding-y: calc(var(--spacing-3xl) * .15 * .5);--btn-padding-x: calc(var(--spacing-3xl) * .15);--btn-border-radius: var(--border-radius)}.btn-4xl{--btn-font-size: calc(var(--spacing-4xl) * .14);--btn-padding-y: calc(var(--spacing-4xl) * .14 * .5);--btn-padding-x: calc(var(--spacing-4xl) * .14);--btn-border-radius: var(--border-radius)}.btn-close{--btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");--btn-close-opacity: .5;--btn-close-hover-opacity: .75;--btn-close-focus-shadow: 0 0 0 .1rem var(--primary);--btn-close-focus-opacity: 1;--btn-close-disabled-opacity: .25;-webkit-mask-image:var(--btn-close-bg);mask-image:var(--btn-close-bg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.btn:disabled{background-color:color-mix(in srgb,var(--primary),white 85%);border-color:color-mix(in srgb,var(--primary),white 85%);color:color-mix(in srgb,var(--primary),white 60%)}}

package/dist/components/Color/react/index.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { tokens as t } from "../../../core/styles/tokens.js";
+import { tokens as e } from "../../../core/styles/tokens.js";
 import '../../Placeholder/style/index.css';import '../../Logo/style/index.css';import '../../Radius/style/index.css';import '../../Shadow/style/index.css';import '../../../node_modules/.pnpm/flag-icons@7.5.0/node_modules/flag-icons/css/flag-icons.min.css';import '../../Context-menu/style/index.css';import '../../Divider/style/index.css';import '../../Badge/style/index.css';import '../../Avatar/style/index.css';import '../../Icon/style/index.css';import '../../Button/style/index.css';import '../style/index.css';import '../../../core/styles/main.css';/* empty css                             */
 /* empty css                  */
 import "react-bootstrap";
@@ -21,29 +21,30 @@ import "../../Dropdown/react/index.js";
 import "../../Modal/react/index.js";
 /* empty css                                 */
 import "../../Tooltip/react/index.js";
-const w = ({ name: r }) => {
-  const e = t.brands[r];
+import "../../Table/react/index.js";
+const y = ({ name: r }) => {
+  const t = e.brands[r];
   return /* @__PURE__ */ i(l, { children: [
     /* @__PURE__ */ o("div", { className: `color bg-${r} p-4`, children: /* @__PURE__ */ i(l, { vertical: !0, center: !0, children: [
       /* @__PURE__ */ o("span", { className: "color__name", children: r }),
-      /* @__PURE__ */ o("span", { className: "color__value", children: e.value })
+      /* @__PURE__ */ o("span", { className: "color__value", children: t.value })
     ] }) }),
     /* @__PURE__ */ o("div", { className: `color bg-${r}-light p-4`, children: /* @__PURE__ */ i(l, { vertical: !0, center: !0, children: [
       /* @__PURE__ */ i("span", { className: "color__name", children: [
         r,
         "-light"
       ] }),
-      /* @__PURE__ */ o("span", { className: "color__value", children: e.value })
+      /* @__PURE__ */ o("span", { className: "color__value", children: t.value })
     ] }) }),
     /* @__PURE__ */ o("div", { className: `color bg-${r}-dark p-4`, children: /* @__PURE__ */ i(l, { vertical: !0, center: !0, children: [
       /* @__PURE__ */ i("span", { className: "color__name", children: [
         r,
         "-dark"
       ] }),
-      /* @__PURE__ */ o("span", { className: "color__value", children: e.value })
+      /* @__PURE__ */ o("span", { className: "color__value", children: t.value })
     ] }) })
   ] });
 };
 export {
-  w as Color
+  y as Color
 };

package/dist/components/Context-menu/js/context-menu.d.ts

@@ -31,9 +31,11 @@ export declare const isItemDisabled: (item: ContextMenuItem) => boolean;
  * @param {number} y - Position Y souhaitée.
  * @param {number} menuWidth - Largeur du menu.
  * @param {number} menuHeight - Hauteur du menu.
+ * @param {number} [offsetX=2] - Décalage horizontal par rapport au clic.
+ * @param {number} [offsetY=2] - Décalage vertical par rapport au clic.
  * @returns {{x: number, y: number}} La position corrigée.
  */
-export declare const calculatePosition: (x: number, y: number, menuWidth: number, menuHeight: number) => {
+export declare const calculatePosition: (x: number, y: number, menuWidth: number, menuHeight: number, offsetX?: number, offsetY?: number) => {
     x: number;
     y: number;
 };

package/dist/components/Context-menu/js/context-menu.js

@@ -1,19 +1,22 @@
-const n = (t) => {
+const c = (t) => {
   const e = t.items && t.items.length > 0;
   return !!(t.disabled || !e && !t.onAction && !t.action && t.type !== "separator");
-}, r = (t, e, o, a) => {
-  let l = t, i = e;
-  return t + o > window.innerWidth && (l = t - o), e + a > window.innerHeight && (i = e - a), { x: Math.max(0, l), y: Math.max(0, i) };
-}, s = () => {
+}, s = (t, e, o, a, n = 2, r = 2) => {
+  let l = t + n, i = e + r;
+  return l + o > window.innerWidth && (l = t - o - n), i + a > window.innerHeight && (i = e - a - r), {
+    x: Math.max(0, Math.min(l, window.innerWidth - o)),
+    y: Math.max(0, Math.min(i, window.innerHeight - a))
+  };
+}, d = () => {
   document.body.style.overflow = "hidden";
-}, c = () => {
+}, b = () => {
   document.body.style.overflow = "";
-}, d = (t) => {
+}, h = (t) => {
   const e = t.getBoundingClientRect();
   e.right > window.innerWidth && (t.style.left = "auto", t.style.right = "100%", t.style.marginLeft = "0", t.style.marginRight = "2px"), e.bottom > window.innerHeight && (t.style.top = "auto", t.style.bottom = "0");
-}, b = (t, e) => {
-  n(t) || t.type === "separator" || (t.onAction && t.onAction(), t.action && e && e(t.action));
-}, p = (t) => !t || t.length === 0 ? "" : t.join(" + "), h = {
+}, p = (t, e) => {
+  c(t) || t.type === "separator" || (t.onAction && t.onAction(), t.action && e && e(t.action));
+}, u = (t) => !t || t.length === 0 ? "" : t.join(" + "), w = {
   items: [
     {
       label: "Nouveau",
@@ -74,12 +77,12 @@ const n = (t) => {
   ]
 };
 export {
-  d as adjustSubMenuPosition,
-  r as calculatePosition,
-  h as contextMenuData,
-  b as executeAction,
-  p as getDisplayShortcut,
-  n as isItemDisabled,
-  s as lockScroll,
-  c as unlockScroll
+  h as adjustSubMenuPosition,
+  s as calculatePosition,
+  w as contextMenuData,
+  p as executeAction,
+  u as getDisplayShortcut,
+  c as isItemDisabled,
+  d as lockScroll,
+  b as unlockScroll
 };

package/dist/components/Context-menu/react/index.js

@@ -1,29 +1,29 @@
-import { jsxs as M, jsx as u } from "react/jsx-runtime";
-import { useState as b, useRef as _, useCallback as x, useEffect as S } from "react";
-import { calculatePosition as C, lockScroll as y, unlockScroll as h, contextMenuData as g, getDisplayShortcut as N, isItemDisabled as k, adjustSubMenuPosition as D, executeAction as E } from "../js/context-menu.js";
+import { jsxs as M, jsx as l } from "react/jsx-runtime";
+import { useState as b, useRef as v, useCallback as h, useEffect as x } from "react";
+import { calculatePosition as C, lockScroll as g, unlockScroll as y, contextMenuData as N, getDisplayShortcut as k, isItemDisabled as D, adjustSubMenuPosition as E, executeAction as I } from "../js/context-menu.js";
 import '../style/index.css';/* empty css                  */
-const $ = ({ item: e, onAction: f, closeMenu: p }) => {
-  const [l, o] = b(!1), c = _(null), t = "context-menu", n = !!(e.items && e.items.length > 0), r = N(e.shortcuts), i = k(e);
-  return S(() => {
-    l && c.current && D(c.current);
-  }, [l]), e.type === "separator" ? /* @__PURE__ */ u("div", { className: `${t}__separator` }) : /* @__PURE__ */ M(
+const $ = ({ item: s, onAction: f, closeMenu: p }) => {
+  const [u, o] = b(!1), r = v(null), e = "context-menu", i = !!(s.items && s.items.length > 0), t = k(s.shortcuts), c = D(s);
+  return x(() => {
+    u && r.current && E(r.current);
+  }, [u]), s.type === "separator" ? /* @__PURE__ */ l("div", { className: `${e}__separator` }) : /* @__PURE__ */ M(
     "div",
     {
-      className: `${t}__item ${n ? `${t}__sub-trigger` : ""} ${i ? "disabled" : ""}`.trim(),
-      onMouseEnter: () => n && !i && o(!0),
-      onMouseLeave: () => n && !i && o(!1),
+      className: `${e}__item ${i ? `${e}__sub-trigger` : ""} ${c ? "disabled" : ""}`.trim(),
+      onMouseEnter: () => i && !c && o(!0),
+      onMouseLeave: () => i && !c && o(!1),
       onClick: (a) => {
-        !n && !i && (a.stopPropagation(), E(e, f), p());
+        !i && !c && (a.stopPropagation(), I(s, f), p());
       },
       children: [
-        e.label,
-        r && /* @__PURE__ */ u("span", { className: `${t}__shortcut`, children: r }),
-        n && l && /* @__PURE__ */ u(
+        s.label,
+        t && /* @__PURE__ */ l("span", { className: `${e}__shortcut`, children: t }),
+        i && u && /* @__PURE__ */ l(
           "div",
           {
-            ref: c,
-            className: `${t} ${t}__sub-menu`,
-            children: e.items.map((a, m) => /* @__PURE__ */ u(
+            ref: r,
+            className: `${e} ${e}__sub-menu`,
+            children: s.items.map((a, m) => /* @__PURE__ */ l(
               $,
               {
                 item: a,
@@ -37,46 +37,51 @@ const $ = ({ item: e, onAction: f, closeMenu: p }) => {
       ]
     }
   );
-}, w = ({
-  items: e = g.items,
+}, L = ({
+  items: s = N.items,
   onAction: f,
   children: p,
-  className: l = ""
+  className: u = ""
 }) => {
-  const [o, c] = b(!1), [t, n] = b({ x: 0, y: 0 }), r = _(null), i = "context-menu", a = x((s) => {
-    s.preventDefault(), c(!0);
-    const { x: d, y: v } = C(s.clientX, s.clientY, 160, 200);
-    n({ x: d, y: v });
-  }, []), m = x(() => {
-    c(!1);
+  const [o, r] = b(!1), [e, i] = b({ x: 0, y: 0 }), t = v(null), c = "context-menu", a = h((n) => {
+    n.preventDefault(), i({ x: n.clientX, y: n.clientY }), r(!0);
+  }, []), m = h(() => {
+    r(!1);
   }, []);
-  return S(() => {
-    const s = (d) => {
-      r.current && !r.current.contains(d.target) && m();
+  return x(() => {
+    if (o && t.current) {
+      const { offsetWidth: n, offsetHeight: d } = t.current, { x: _, y: S } = C(e.x, e.y, n, d);
+      t.current.style.top = `${S}px`, t.current.style.left = `${_}px`, t.current.style.visibility = "visible";
+    }
+  }, [o, e.x, e.y]), x(() => {
+    const n = (d) => {
+      t.current && !t.current.contains(d.target) && m();
     };
-    return o ? (document.addEventListener("mousedown", s), y()) : h(), () => {
-      document.removeEventListener("mousedown", s), h();
+    return o ? (document.addEventListener("mousedown", n), g()) : y(), () => {
+      document.removeEventListener("mousedown", n), y();
     };
   }, [o, m]), /* @__PURE__ */ M(
     "div",
     {
       onContextMenu: a,
-      className: `context-menu-wrapper ${l}`,
+      className: `context-menu-wrapper ${u}`,
       children: [
         p,
-        o && /* @__PURE__ */ u(
+        o && /* @__PURE__ */ l(
           "div",
           {
-            ref: r,
-            className: i,
+            ref: t,
+            className: c,
             style: {
-              top: t.y,
-              left: t.x
+              top: e.y,
+              left: e.x,
+              visibility: "hidden"
+              // Caché le temps de la mesure au premier affichage
             },
-            children: e.map((s, d) => /* @__PURE__ */ u(
+            children: s.map((n, d) => /* @__PURE__ */ l(
               $,
               {
-                item: s,
+                item: n,
                 onAction: f,
                 closeMenu: m
               },
@@ -89,5 +94,5 @@ const $ = ({ item: e, onAction: f, closeMenu: p }) => {
   );
 };
 export {
-  w as ContextMenu
+  L as ContextMenu
 };

package/dist/components/Dropdown/react/index.d.ts

@@ -3,6 +3,7 @@ interface DropdownItem {
     label?: string;
     href?: string;
     type?: "divider" | "item";
+    onClick?: () => void;
 }
 interface Props extends Omit<DropdownProps, "children"> {
     /**
@@ -25,6 +26,10 @@ interface Props extends Omit<DropdownProps, "children"> {
      * Contenu optionnel.
      */
     children?: React.ReactNode;
+    /**
+     * Fonction appelée lorsque le dropdown est ouvert.
+     */
+    onClick?: () => void;
 }
 /**
  * Composant Dropdown personnalisé.
@@ -34,7 +39,7 @@ interface Props extends Omit<DropdownProps, "children"> {
  * @returns {JSX.Element} Le composant Dropdown rendu.
  */
 export declare const Dropdown: {
-    ({ label, variant, items, align, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ label, variant, items, align, className, children, onClick, ...props }: Props): import("react/jsx-runtime").JSX.Element;
     Toggle({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
     Menu({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
     Item({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dropdown/react/index.js

@@ -1,33 +1,35 @@
-import { jsx as o, jsxs as c, Fragment as $ } from "react/jsx-runtime";
+import { jsx as o, jsxs as _, Fragment as $ } from "react/jsx-runtime";
 import { Dropdown as d } from "react-bootstrap";
 import '../style/index.css';/* empty css                  */
-const s = ({
+const n = ({
   label: r = "Dropdown",
   variant: e = "primary",
-  items: t = [],
-  align: l = "start",
-  className: p = "",
-  children: a,
-  ..._
+  items: l = [],
+  align: t = "start",
+  className: c = "",
+  children: s,
+  onClick: g,
+  ...p
 }) => {
-  const m = "dropdown";
-  return /* @__PURE__ */ o(d, { className: `${m} ${p}`.trim(), align: l, ..._, children: a || /* @__PURE__ */ c($, { children: [
-    /* @__PURE__ */ o(d.Toggle, { variant: e, id: `dropdown-${r}`, className: `${m}__toggle`, children: r }),
-    /* @__PURE__ */ o(d.Menu, { className: `${m}__menu`, children: t.map((i, n) => i.type === "divider" ? /* @__PURE__ */ o(d.Divider, { className: `${m}__divider` }, n) : /* @__PURE__ */ o(
+  const i = "dropdown";
+  return /* @__PURE__ */ o(d, { className: `${i} ${c}`.trim(), align: t, ...p, children: s || /* @__PURE__ */ _($, { children: [
+    /* @__PURE__ */ o(d.Toggle, { variant: e, id: `dropdown-${r}`, className: `${i}__toggle`, children: r }),
+    /* @__PURE__ */ o(d.Menu, { className: `${i}__menu`, children: l.map((m, a) => m.type === "divider" ? /* @__PURE__ */ o(d.Divider, { className: `${i}__divider` }, a) : /* @__PURE__ */ o(
       d.Item,
       {
-        href: i.href,
-        className: `${m}__item`,
-        children: i.label
+        href: m.href,
+        className: `${i}__item`,
+        onClick: m.onClick,
+        children: m.label
       },
-      n
+      a
     )) })
   ] }) });
 };
-s.Toggle = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Toggle, { className: `dropdown__toggle ${r}`.trim(), ...e });
-s.Menu = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Menu, { className: `dropdown__menu ${r}`.trim(), ...e });
-s.Item = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Item, { className: `dropdown__item ${r}`.trim(), ...e });
-s.Divider = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Divider, { className: `dropdown__divider ${r}`.trim(), ...e });
+n.Toggle = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Toggle, { className: `dropdown__toggle ${r}`.trim(), ...e });
+n.Menu = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Menu, { className: `dropdown__menu ${r}`.trim(), ...e });
+n.Item = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Item, { className: `dropdown__item ${r}`.trim(), ...e });
+n.Divider = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Divider, { className: `dropdown__divider ${r}`.trim(), ...e });
 export {
-  s as Dropdown
+  n as Dropdown
 };

package/dist/components/Form/react/Select.d.ts

@@ -33,6 +33,10 @@ interface Props {
      * Désactiver le composant.
      */
     disabled?: boolean;
+    /**
+     * Activer/Désactiver la recherche (par défaut: true).
+     */
+    searchable?: boolean;
     /**
      * Classe CSS additionnelle.
      */
@@ -44,5 +48,5 @@ interface Props {
  * @param {Props} props - Les propriétés du composant.
  * @returns {JSX.Element} Le composant Select rendu.
  */
-export declare const Select: ({ options, value, onChange, multiple, placeholder, disabled, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ options, value, onChange, multiple, placeholder, disabled, searchable, className, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Form/react/Select.js

@@ -1,16 +1,17 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useRef as l, useEffect as a } from "react";
-import { initSelect as d } from "../js/select.js";
-const N = ({
+import { jsx as l } from "react/jsx-runtime";
+import { useRef as f, useEffect as a } from "react";
+import { initSelect as h } from "../js/select.js";
+const x = ({
   options: s,
   value: r,
   onChange: u,
   multiple: i = !1,
   placeholder: o = "Sélectionnez une option",
   disabled: m = !1,
-  className: y = ""
+  searchable: y = !0,
+  className: d = ""
 }) => {
-  const n = l(null), e = l(null);
+  const n = f(null), e = f(null);
   return a(() => {
     if (s) {
       if (n.current) {
@@ -20,10 +21,11 @@ const N = ({
           label: t.text,
           selected: Array.isArray(r) ? r.includes(t.value) : r === t.value
         }));
-        e.current = d(n.current, {
+        e.current = h(n.current, {
           choices: c,
           removeItemButton: i,
           placeholderValue: o,
+          searchEnabled: y,
           silent: !0
         }, u);
       }
@@ -36,7 +38,7 @@ const N = ({
       const c = e.current.getValue(!0), t = Array.isArray(r) ? r : [r], A = Array.isArray(c) ? c : [c];
       JSON.stringify(t.sort()) !== JSON.stringify(A.sort()) && e.current.setChoiceByValue(r);
     }
-  }, [r]), /* @__PURE__ */ f("div", { className: `form__input ${y}`.trim(), children: /* @__PURE__ */ f(
+  }, [r]), /* @__PURE__ */ l("div", { className: `form__input ${d}`.trim(), children: /* @__PURE__ */ l(
     "select",
     {
       ref: n,
@@ -47,5 +49,5 @@ const N = ({
   ) });
 };
 export {
-  N as Select
+  x as Select
 };

package/dist/components/Group/react/index.d.ts

@@ -27,6 +27,10 @@ interface Props {
      * Espacement entre les éléments (gap).
      */
     gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Alignement des éléments.
+     */
+    align?: "start" | "end" | "center";
 }
 /**
  * Composant de groupement simple.
@@ -35,5 +39,5 @@ interface Props {
  * @param {Props} props - Les propriétés du composant.
  * @returns {JSX.Element} Le composant Group rendu.
  */
-export declare const Group: ({ children, vertical, title, className, gap, center, ariaLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Group: ({ children, vertical, title, className, gap, center, ariaLabel, align, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Group/react/index.js

@@ -1,24 +1,25 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as $ } from "react/jsx-runtime";
 import '../style/index.css';/* empty css                  */
-const i = ({
-  children: s,
-  vertical: e = !1,
+const d = ({
+  children: o,
+  vertical: a = !1,
   title: r = "",
-  className: a = "",
-  gap: o = "md",
-  center: t = !1,
-  ariaLabel: l = r ? `Groupe d'éléments ${r}` : "Groupe d'éléments"
+  className: t = "",
+  gap: e = "md",
+  center: p = !1,
+  ariaLabel: l = r ? `Groupe d'éléments ${r}` : "Groupe d'éléments",
+  align: s = "start"
 }) => {
-  const p = e ? "group--vertical" : "", c = `group--gap-${o}`;
-  return /* @__PURE__ */ n(
+  const c = a ? "group--vertical" : "", n = `group--gap-${e}`, u = p ? "group--center" : "", m = s ? `group--${s}` : "";
+  return /* @__PURE__ */ $(
     "div",
     {
       "aria-label": l,
-      className: `group ${p} ${c} ${t ? "group--center" : ""} ${a}`.trim(),
-      children: s
+      className: `group ${c} ${n} ${u} ${m} ${t}`.trim(),
+      children: o
     }
   );
 };
 export {
-  i as Group
+  d as Group
 };

package/dist/components/Group/style/index.css

@@ -1 +1 @@
-@layer components{.group{display:flex;flex-wrap:wrap;gap:.5rem}.group--vertical{flex-direction:column;align-items:flex-start}.group--horizontal{flex-direction:row;align-items:center}.group--no-wrap{flex-wrap:nowrap}.group--gap-none{gap:0}.group--center{align-items:center;justify-content:center}}
+@layer components{.group{display:flex;flex-wrap:wrap;gap:.5rem}.group--vertical{flex-direction:column;align-items:flex-start}.group--horizontal{flex-direction:row;align-items:center}.group--no-wrap{flex-wrap:nowrap}.group--gap-none{gap:0}.group--center{align-items:center;justify-content:center}.group--start{justify-content:flex-start}.group--end{justify-content:flex-end}}