lerelais-front-library 0.1.0

package/src/assets/icons/package-white.svg

@@ -0,0 +1,8 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-package">
+<path id="Vector" d="M5.625 3.2025L12.375 7.065" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M15.75 6C15.7497 5.73696 15.6803 5.47861 15.5487 5.25087C15.417 5.02314 15.2278 4.83402 15 4.7025L9.75 1.7025C9.52197 1.57085 9.2633 1.50154 9 1.50154C8.7367 1.50154 8.47803 1.57085 8.25 1.7025L3 4.7025C2.7722 4.83402 2.58299 5.02314 2.45135 5.25087C2.31971 5.47861 2.25027 5.73696 2.25 6V12C2.25027 12.263 2.31971 12.5214 2.45135 12.7491C2.58299 12.9769 2.7722 13.166 3 13.2975L8.25 16.2975C8.47803 16.4292 8.7367 16.4985 9 16.4985C9.2633 16.4985 9.52197 16.4292 9.75 16.2975L15 13.2975C15.2278 13.166 15.417 12.9769 15.5487 12.7491C15.6803 12.5214 15.7497 12.263 15.75 12V6Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M2.475 5.25L9 9L15.525 5.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M9 16.5V9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/icons/package.svg

@@ -0,0 +1,8 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-package">
+<path id="Vector" d="M10 5.69333L22 12.56" stroke="#D34860" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M28 10.6667C27.9995 10.199 27.8761 9.73975 27.6421 9.33488C27.408 8.93002 27.0717 8.59382 26.6667 8.36L17.3333 3.02667C16.9279 2.79262 16.4681 2.6694 16 2.6694C15.5319 2.6694 15.0721 2.79262 14.6667 3.02667L5.33333 8.36C4.92835 8.59382 4.59197 8.93002 4.35795 9.33488C4.12392 9.73975 4.00048 10.199 4 10.6667V21.3333C4.00048 21.801 4.12392 22.2603 4.35795 22.6651C4.59197 23.07 4.92835 23.4062 5.33333 23.64L14.6667 28.9733C15.0721 29.2074 15.5319 29.3306 16 29.3306C16.4681 29.3306 16.9279 29.2074 17.3333 28.9733L26.6667 23.64C27.0717 23.4062 27.408 23.07 27.6421 22.6651C27.8761 22.2603 27.9995 21.801 28 21.3333V10.6667Z" stroke="#D34860" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M4.4 9.33333L16 16L27.6 9.33333" stroke="#D34860" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M16 29.3333V16" stroke="#D34860" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/icons/plus.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-plus">
+<path id="Vector" d="M3.33333 8H12.6667" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8 3.33333V12.6667" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/icons/settings.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-settings">
+<path id="Vector" d="M8.14667 1.33333H7.85333C7.49971 1.33333 7.16057 1.47381 6.91052 1.72386C6.66048 1.97391 6.52 2.31304 6.52 2.66667V2.78667C6.51976 3.02048 6.45804 3.25013 6.34103 3.45256C6.22401 3.65499 6.05582 3.82309 5.85333 3.94L5.56667 4.10667C5.36397 4.22369 5.13405 4.2853 4.9 4.2853C4.66595 4.2853 4.43603 4.22369 4.23333 4.10667L4.13333 4.05333C3.82738 3.87684 3.46389 3.82896 3.12267 3.92021C2.78144 4.01145 2.49037 4.23436 2.31333 4.54L2.16667 4.79333C1.99018 5.09929 1.9423 5.46278 2.03354 5.804C2.12478 6.14522 2.34769 6.4363 2.65333 6.61333L2.75333 6.68C2.95485 6.79634 3.12241 6.96339 3.23937 7.16455C3.35632 7.36572 3.4186 7.59398 3.42 7.82667V8.16667C3.42093 8.40161 3.35977 8.63264 3.2427 8.83634C3.12562 9.04004 2.95681 9.20919 2.75333 9.32667L2.65333 9.38667C2.34769 9.5637 2.12478 9.85478 2.03354 10.196C1.9423 10.5372 1.99018 10.9007 2.16667 11.2067L2.31333 11.46C2.49037 11.7656 2.78144 11.9886 3.12267 12.0798C3.46389 12.171 3.82738 12.1232 4.13333 11.9467L4.23333 11.8933C4.43603 11.7763 4.66595 11.7147 4.9 11.7147C5.13405 11.7147 5.36397 11.7763 5.56667 11.8933L5.85333 12.06C6.05582 12.1769 6.22401 12.345 6.34103 12.5474C6.45804 12.7499 6.51976 12.9795 6.52 13.2133V13.3333C6.52 13.687 6.66048 14.0261 6.91052 14.2761C7.16057 14.5262 7.49971 14.6667 7.85333 14.6667H8.14667C8.50029 14.6667 8.83943 14.5262 9.08948 14.2761C9.33952 14.0261 9.48 13.687 9.48 13.3333V13.2133C9.48024 12.9795 9.54196 12.7499 9.65897 12.5474C9.77599 12.345 9.94418 12.1769 10.1467 12.06L10.4333 11.8933C10.636 11.7763 10.866 11.7147 11.1 11.7147C11.334 11.7147 11.564 11.7763 11.7667 11.8933L11.8667 11.9467C12.1726 12.1232 12.5361 12.171 12.8773 12.0798C13.2186 11.9886 13.5096 11.7656 13.6867 11.46L13.8333 11.2C14.0098 10.894 14.0577 10.5306 13.9665 10.1893C13.8752 9.84811 13.6523 9.55703 13.3467 9.38L13.2467 9.32667C13.0432 9.20919 12.8744 9.04004 12.7573 8.83634C12.6402 8.63264 12.5791 8.40161 12.58 8.16667V7.83333C12.5791 7.59839 12.6402 7.36736 12.7573 7.16366C12.8744 6.95996 13.0432 6.79081 13.2467 6.67333L13.3467 6.61333C13.6523 6.4363 13.8752 6.14522 13.9665 5.804C14.0577 5.46278 14.0098 5.09929 13.8333 4.79333L13.6867 4.54C13.5096 4.23436 13.2186 4.01145 12.8773 3.92021C12.5361 3.82896 12.1726 3.87684 11.8667 4.05333L11.7667 4.10667C11.564 4.22369 11.334 4.2853 11.1 4.2853C10.866 4.2853 10.636 4.22369 10.4333 4.10667L10.1467 3.94C9.94418 3.82309 9.77599 3.65499 9.65897 3.45256C9.54196 3.25013 9.48024 3.02048 9.48 2.78667V2.66667C9.48 2.31304 9.33952 1.97391 9.08948 1.72386C8.83943 1.47381 8.50029 1.33333 8.14667 1.33333Z" stroke="#606978" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="#606978" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/icons/switch-off.svg

@@ -0,0 +1,19 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="45" height="26" viewBox="0 0 45 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Switch">
+<rect x="1" width="44" height="24" rx="12" fill="#D0D5DD"/>
+<g id="Knob" filter="url(#filter0_d_0_6)">
+<circle cx="13" cy="12" r="10" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_0_6" x="0" y="0" width="26" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_6"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_6" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/icons/switch-on.svg

@@ -0,0 +1,19 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="45" height="26" viewBox="0 0 45 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Switch">
+<rect width="44" height="24" rx="12" fill="#D34860"/>
+<g id="Knob" filter="url(#filter0_d_0_10)">
+<circle cx="32" cy="12" r="10" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_0_10" x="19" y="0" width="26" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_10" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/icons/unread-dot.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle id="Unread dot" cx="4" cy="4" r="4" fill="#D34860"/>
+</svg>

package/src/assets/icons/upload-cloud.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="upload-cloud">
+<path id="Vector" d="M16.0007 17.333V28M21.3337 22.6665L16.0007 17.333L10.6676 22.6665M5.33506 19.8654C4.34451 18.8533 3.59725 17.629 3.1499 16.2853C2.70255 14.9415 2.56683 13.5136 2.75302 12.1096C2.93922 10.7057 3.44244 9.36247 4.22458 8.18182C5.00673 7.00116 6.04727 6.01399 7.2674 5.29509C8.48753 4.57618 9.85524 4.14439 11.267 4.03242C12.6787 3.92045 14.0973 4.13123 15.4155 4.64881C16.7337 5.16639 17.9168 5.97719 18.8753 7.01978C19.8337 8.06238 20.5424 9.30944 20.9475 10.6665H23.3341C24.6213 10.6664 25.8745 11.0803 26.9085 11.8471C27.9425 12.614 28.7024 13.6931 29.0761 14.925C29.4497 16.157 29.4173 17.4765 28.9835 18.6886C28.5497 19.9007 27.7376 20.9411 26.6672 21.6562" stroke="#606978" stroke-width="2" stroke-linecap="round"/>
+</g>
+</svg>

package/src/assets/icons/user.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-user">
+<path id="Vector" d="M12.6667 14V12.6667C12.6667 11.9594 12.3857 11.2811 11.8856 10.781C11.3855 10.281 10.7072 10 10 10H6C5.29276 10 4.61448 10.281 4.11438 10.781C3.61428 11.2811 3.33333 11.9594 3.33333 12.6667V14" stroke="#606978" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8 7.33333C9.47276 7.33333 10.6667 6.13943 10.6667 4.66667C10.6667 3.19391 9.47276 2 8 2C6.52724 2 5.33333 3.19391 5.33333 4.66667C5.33333 6.13943 6.52724 7.33333 8 7.33333Z" stroke="#606978" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/icons.ts

@@ -0,0 +1,41 @@
+import alertTriangle from './icons/alert-triangle.svg';
+import arrowRight from './icons/arrow-right.svg';
+import bell from './icons/bell.svg';
+import chevronDown from './icons/chevron-down.svg';
+import chevronRight from './icons/chevron-right.svg';
+import clock from './icons/clock.svg';
+import clockMuted from './icons/clock-muted.svg';
+import close from './icons/close.svg';
+import heart from './icons/heart.svg';
+import logout from './icons/logout.svg';
+import mapPin from './icons/map-pin.svg';
+import packageIcon from './icons/package.svg';
+import packageRead from './icons/package-read.svg';
+import packageWhite from './icons/package-white.svg';
+import plus from './icons/plus.svg';
+import settings from './icons/settings.svg';
+import uploadCloud from './icons/upload-cloud.svg';
+import user from './icons/user.svg';
+
+export const icons = {
+  alertTriangle,
+  arrowRight,
+  bell,
+  chevronDown,
+  chevronRight,
+  clock,
+  clockMuted,
+  close,
+  heart,
+  logout,
+  mapPin,
+  package: packageIcon,
+  packageRead,
+  packageWhite,
+  plus,
+  settings,
+  uploadCloud,
+  user,
+} as const;
+
+export type IconName = keyof typeof icons;

package/src/components/Accordion/Accordion.module.css

@@ -0,0 +1,34 @@
+.item {
+  width: 100%;
+  border: 1px solid var(--color-border);
+  background: #fff;
+}
+
+.heading {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  padding: 16px;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 16px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+}
+
+.panel {
+  padding: 0 16px 20px;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Accordion } from './Accordion';
+
+describe('<Accordion>', () => {
+  it('should render the title collapsed', () => {
+    render(<Accordion title="Comment suivre mon colis LeRelais ?">Détail</Accordion>);
+    expect(screen.getByRole('button', { name: /Comment suivre/ })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText('Détail')).not.toBeInTheDocument();
+  });
+
+  it('should reveal the content when activated', async () => {
+    const user = userEvent.setup();
+    render(<Accordion title="Délais">Les délais varient de 24h à 72h.</Accordion>);
+
+    await user.click(screen.getByRole('button', { name: 'Délais' }));
+
+    expect(screen.getByText('Les délais varient de 24h à 72h.')).toBeInTheDocument();
+  });
+});

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,38 @@
+import { useId, useState, type ReactNode } from 'react';
+import { cn } from '@/lib/cn';
+import { Icon } from '@/components/Icon';
+import styles from './Accordion.module.css';
+
+export interface AccordionProps {
+  title: string;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+export function Accordion({ title, children, defaultOpen = false, className }: AccordionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  const panelId = useId();
+
+  return (
+    <div className={cn(styles.item, className)}>
+      <h3 className={styles.heading}>
+        <button
+          type="button"
+          className={styles.trigger}
+          aria-expanded={open}
+          aria-controls={panelId}
+          onClick={() => setOpen((current) => !current)}
+        >
+          <span>{title}</span>
+          <Icon name={open ? 'chevronDown' : 'chevronRight'} size={16} />
+        </button>
+      </h3>
+      {open ? (
+        <div id={panelId} className={styles.panel}>
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export { Accordion, type AccordionProps } from './Accordion';

package/src/components/ActionCard/ActionCard.module.css

@@ -0,0 +1,50 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  max-width: 450px;
+  padding: 24px;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgb(16 24 40 / 8%);
+}
+
+.primary,
+.secondary {
+  width: 100%;
+  padding: 16px 20px;
+  border-radius: 14px;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.3;
+  text-align: left;
+  cursor: pointer;
+}
+
+.primary {
+  border: 0;
+  background: #d34860;
+  color: #fff;
+  box-shadow: 0 8px 18px rgb(211 72 96 / 20%);
+}
+
+.secondary {
+  border: 1px solid #d34860;
+  background: #fff;
+  color: #d34860;
+}
+
+.trust {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  color: #606978;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+}

package/src/components/ActionCard/ActionCard.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ActionCard } from './ActionCard';
+
+describe('<ActionCard>', () => {
+  it('should call the primary action', async () => {
+    const user = userEvent.setup();
+    const onPrimary = vi.fn();
+    render(<ActionCard onPrimary={onPrimary} />);
+
+    await user.click(screen.getByRole('button', { name: 'Choisir ce point relais' }));
+
+    expect(onPrimary).toHaveBeenCalledOnce();
+  });
+});

package/src/components/ActionCard/ActionCard.tsx

@@ -0,0 +1,33 @@
+import check from '@/assets/icons/core-check.svg';
+import styles from './ActionCard.module.css';
+
+export interface ActionCardProps {
+  primaryLabel?: string;
+  secondaryLabel?: string;
+  trust?: string;
+  onPrimary?: () => void;
+  onSecondary?: () => void;
+}
+
+export function ActionCard({
+  primaryLabel = 'Choisir ce point relais',
+  secondaryLabel = 'Voir les relais à proximité',
+  trust = 'Plus de 120 colis traités ce mois',
+  onPrimary,
+  onSecondary,
+}: ActionCardProps) {
+  return (
+    <article className={styles.card}>
+      <button type="button" className={styles.primary} onClick={onPrimary}>
+        {primaryLabel}
+      </button>
+      <button type="button" className={styles.secondary} onClick={onSecondary}>
+        {secondaryLabel}
+      </button>
+      <p className={styles.trust}>
+        <img src={check} alt="" width={16} height={16} />
+        {trust}
+      </p>
+    </article>
+  );
+}

package/src/components/ActionCard/index.ts

@@ -0,0 +1 @@
+export { ActionCard, type ActionCardProps } from './ActionCard';

package/src/components/Alert/Alert.module.css

@@ -0,0 +1,47 @@
+.alert {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 360px;
+  max-width: 100%;
+  padding: 13px 16px;
+  border-radius: var(--radius-md);
+}
+
+.title {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.message {
+  font-size: 11px;
+  color: var(--color-text);
+}
+
+.info {
+  background: var(--color-info-bg);
+}
+.info .title {
+  color: var(--color-info);
+}
+
+.success {
+  background: var(--color-success-bg);
+}
+.success .title {
+  color: var(--color-success);
+}
+
+.warning {
+  background: var(--color-warning-bg);
+}
+.warning .title {
+  color: var(--color-warning);
+}
+
+.error {
+  background: var(--color-error-bg);
+}
+.error .title {
+  color: var(--color-error);
+}

package/src/components/Alert/Alert.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { Alert } from './Alert';
+
+describe('<Alert>', () => {
+  it('should render the message', () => {
+    render(<Alert>Information utile pour continuer.</Alert>);
+    expect(screen.getByText('Information utile pour continuer.')).toBeInTheDocument();
+  });
+
+  it('should expose an error as an alert', () => {
+    render(<Alert type="error">Une erreur empêche de continuer.</Alert>);
+    expect(screen.getByRole('alert')).toHaveTextContent('Une erreur empêche de continuer.');
+  });
+});

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,27 @@
+import { cn } from '@/lib/cn';
+import styles from './Alert.module.css';
+
+export type AlertType = 'info' | 'success' | 'warning' | 'error';
+
+const TITLES: Record<AlertType, string> = {
+  info: 'Info',
+  success: 'Success',
+  warning: 'Warning',
+  error: 'Error',
+};
+
+export interface AlertProps {
+  type?: AlertType;
+  title?: string;
+  children: string;
+  className?: string;
+}
+
+export function Alert({ type = 'info', title, children, className }: AlertProps) {
+  return (
+    <div className={cn(styles.alert, styles[type], className)} role={type === 'error' ? 'alert' : 'status'}>
+      <p className={styles.title}>{title ?? TITLES[type]}</p>
+      <p className={styles.message}>{children}</p>
+    </div>
+  );
+}

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert, type AlertProps, type AlertType } from './Alert';

package/src/components/Avatar/Avatar.module.css

@@ -0,0 +1,37 @@
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: var(--color-primary);
+  color: #fff;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.sm {
+  width: 32px;
+  height: 32px;
+  border-width: 1.5px;
+  font-size: 12px;
+}
+
+.md {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+}
+
+.lg {
+  width: 48px;
+  height: 48px;
+  font-size: 18px;
+}
+
+.xl {
+  width: 64px;
+  height: 64px;
+  border-width: 2.5px;
+  font-size: 24px;
+}

package/src/components/Avatar/Avatar.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { Avatar } from './Avatar';
+
+describe('<Avatar>', () => {
+  it('should render the initials', () => {
+    render(<Avatar initials="JD" />);
+    expect(screen.getByText('JD')).toBeInTheDocument();
+  });
+});

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@/lib/cn';
+import styles from './Avatar.module.css';
+
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarProps {
+  initials: string;
+  size?: AvatarSize;
+  className?: string;
+}
+
+export function Avatar({ initials, size = 'md', className }: AvatarProps) {
+  return (
+    <span className={cn(styles.avatar, styles[size], className)} aria-hidden="true">
+      {initials}
+    </span>
+  );
+}

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar, type AvatarProps, type AvatarSize } from './Avatar';

package/src/components/Badge/Badge.module.css

@@ -0,0 +1,37 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 112px;
+  height: 30px;
+  padding: 0 12px;
+  border-radius: var(--radius-pill);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.pending {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+}
+
+.transit {
+  background: var(--color-info-bg);
+  color: var(--color-info);
+}
+
+.available {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+.delivered {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+
+.error {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+}

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { Badge } from './Badge';
+
+describe('<Badge>', () => {
+  it('should render the pending label', () => {
+    render(<Badge />);
+    expect(screen.getByText('En attente')).toBeInTheDocument();
+  });
+
+  it('should render the delivered label', () => {
+    render(<Badge status="delivered" />);
+    expect(screen.getByText('Livré')).toBeInTheDocument();
+  });
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/cn';
+import styles from './Badge.module.css';
+
+export type ParcelStatus = 'pending' | 'transit' | 'available' | 'delivered' | 'error';
+
+const LABELS: Record<ParcelStatus, string> = {
+  pending: 'En attente',
+  transit: 'En transit',
+  available: 'Disponible',
+  delivered: 'Livré',
+  error: 'Erreur',
+};
+
+export interface BadgeProps {
+  status?: ParcelStatus;
+  className?: string;
+}
+
+export function Badge({ status = 'pending', className }: BadgeProps) {
+  return <span className={cn(styles.badge, styles[status], className)}>{LABELS[status]}</span>;
+}

package/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export { Badge, type BadgeProps, type ParcelStatus } from './Badge';

package/src/components/BarChart/BarChart.module.css

@@ -0,0 +1,57 @@
+.chart {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 320px;
+  height: 200px;
+  padding: 16px;
+  border-radius: var(--radius-control);
+  background: var(--color-surface-muted);
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.body {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  min-height: 0;
+}
+
+.axis {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: var(--color-text-muted);
+  font-size: 9px;
+}
+
+.bars {
+  display: flex;
+  flex: 1;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  height: 100%;
+}
+
+.bar {
+  width: 28px;
+  border-radius: 4px 4px 0 0;
+}
+
+.label {
+  color: var(--color-text-muted);
+  font-size: 10px;
+}