SquircleBox

Un visuel carré aux coins arrondis façon "squircle". Utilisé comme indicateur décoratif — pastille de statut, marqueur de légende, etc.

Import

import { SquircleBox } from "@/components/SquircleBox";

Utilisation basique

<SquircleBox size={16} color="#33B3A0" />

Taille

Le prop size accepte un nombre (pixels) ou une chaîne (%, rem, etc.) — il est appliqué à la fois à width et height, garantissant une forme carrée.

PetitMoyenGrand

<SquircleBox size={8} color="#2468C1" />

<SquircleBox size={16} color="#2468C1" />

<SquircleBox size={32} color="#2468C1" />

Couleur

Le prop color définit la backgroundColor du composant. N'importe quelle valeur CSS valide fonctionne (hex, rgb(), token de thème via theme.palette..., etc.).

<SquircleBox size={16} color="#EA605D" />

Utilisation avec la palette du design system

Pour rester cohérent avec les couleurs de sévérité du design system, référence-toi à la palette de couleurs plutôt que d'écrire des valeurs hexadécimales en dur.

<SquircleBox size={16} color={COLORS.green.main} />

Personnalisation via `sx`

SquircleBox accepte toutes les props de Box (à l'exception de children, volontairement omis puisqu'il s'agit d'un élément purement décoratif). Le prop sx est fusionné avec les styles internes du composant, ce qui permet de le surcharger sans casser la logique interne.

<SquircleBox size={16} color="#EE5C25" sx={{ opacity: 0.6, marginRight: 1 }} />

Composition des styles

En interne, rootSx (styles calculés) et sx (styles fournis par le consommateur) sont combinés via un tableau (sx={[rootSx, ...sx]}), ce qui suit le pattern recommandé par MUI pour la composition de styles conditionnels. Cela permet à sx de surcharger n'importe quelle propriété définie par le composant, y compris borderRadius ou cornerShape.

API

Props

Prop	Type	Défaut	Description
`size`	`number \\| string`	—	Requis. Taille appliquée à `width` et `height`.
`color`	`string`	—	Requis. Couleur de fond (`backgroundColor`) du squircle.
`sx`	`SxProps<Theme>`	—	Styles additionnels, fusionnés avec les styles internes du composant.
`...rest`	`Omit<BoxProps, 'children'>`	—	Toutes les autres props de `Box` sont transmises telles quelles.

children non supporté

SquircleBox omet volontairement children de son typage (Omit<BoxProps, 'children'>) : c'est un élément purement décoratif, sans contenu interne prévu.

Détails d'implémentation

borderRadius est calculé à partir de theme.shape.borderRadius * 3, ce qui garde la forme cohérente avec l'échelle de arrondis du thème plutôt qu'une valeur en dur.
cornerShape: 'squircle' active le rendu "squircle" natif (courbe continue superellipse) plutôt qu'un simple border-radius classique.
flexShrink: 0 est fixé pour éviter que l'élément ne se compresse dans un conteneur flex — comportement attendu pour un indicateur de taille fixe (pastille, dot, etc.).
Le style racine est mémoïsé via useMemo avec [size, color] comme dépendances, pour éviter de recréer la fonction de style à chaque rendu.

Accessibilité

SquircleBox étant purement décoratif, il ne doit véhiculer aucune information uniquement via la couleur sans alternative textuelle (ex. un statut). Si utilisé comme indicateur de statut, associe-le systématiquement à un libellé texte ou un aria-label porté par un élément parent.