design-zystem 1.0.295 → 1.0.297

package/dist/index.d.mts

@@ -976,12 +976,14 @@ interface MetricCardProps {
     iconBackgroundColor?: string;
     iconColor?: string;
     contentLayout?: 'col' | 'row';
+    /** Cross-axis alignment of the card itself. `alignSelf="stretch"` makes a row of cards share the height of the tallest one — a Box is `align-self: center` by default. */
+    alignSelf?: string;
     onClick?: () => void;
     checked?: boolean;
     /** Contenu libre à droite de l'icône. Remplace title/value quand fourni. */
     children?: ReactNode;
 }
-declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, children, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
+declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, alignSelf, onClick, checked, children, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
 
 interface CardProps {
     children?: ReactNode;
@@ -1317,6 +1319,19 @@ declare const getInitials: (author: AuthorLike | null | undefined) => string;
 
 declare const getAvatarColor: (key: string) => string;
 
+declare const PASTEL_COLORS: {
+    background: string;
+    text: string;
+}[];
+type PastelColorPair = (typeof PASTEL_COLORS)[number];
+/**
+ * Couleur d'avatar déterministe pour un nom, en pastel avec sa couleur de texte
+ * lisible. `generateHexColor` et `getAvatarColor` renvoient un hex saturé et
+ * seul : ils ne conviennent ni au rendu pastel attendu, ni aux props
+ * `backgroundColor` + `textColor` de l'`Avatar`.
+ */
+declare const getPastelColorPair: (firstName?: string, lastName?: string) => PastelColorPair;
+
 declare const formatNameWithInitial: (firstname: string | null, lastname: string | null) => string | null;
 
 declare const getFileNameFromUrl: (url: string | null | undefined, fallback?: string) => string;
@@ -1339,4 +1354,4 @@ declare const formatKM: (value: string | number | null | undefined) => string;
 
 declare const parseAmount: (value: string) => number | null;
 
-export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, type PastelColorPair, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -976,12 +976,14 @@ interface MetricCardProps {
     iconBackgroundColor?: string;
     iconColor?: string;
     contentLayout?: 'col' | 'row';
+    /** Cross-axis alignment of the card itself. `alignSelf="stretch"` makes a row of cards share the height of the tallest one — a Box is `align-self: center` by default. */
+    alignSelf?: string;
     onClick?: () => void;
     checked?: boolean;
     /** Contenu libre à droite de l'icône. Remplace title/value quand fourni. */
     children?: ReactNode;
 }
-declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, children, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
+declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, alignSelf, onClick, checked, children, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
 
 interface CardProps {
     children?: ReactNode;
@@ -1317,6 +1319,19 @@ declare const getInitials: (author: AuthorLike | null | undefined) => string;
 
 declare const getAvatarColor: (key: string) => string;
 
+declare const PASTEL_COLORS: {
+    background: string;
+    text: string;
+}[];
+type PastelColorPair = (typeof PASTEL_COLORS)[number];
+/**
+ * Couleur d'avatar déterministe pour un nom, en pastel avec sa couleur de texte
+ * lisible. `generateHexColor` et `getAvatarColor` renvoient un hex saturé et
+ * seul : ils ne conviennent ni au rendu pastel attendu, ni aux props
+ * `backgroundColor` + `textColor` de l'`Avatar`.
+ */
+declare const getPastelColorPair: (firstName?: string, lastName?: string) => PastelColorPair;
+
 declare const formatNameWithInitial: (firstname: string | null, lastname: string | null) => string | null;
 
 declare const getFileNameFromUrl: (url: string | null | undefined, fallback?: string) => string;
@@ -1339,4 +1354,4 @@ declare const formatKM: (value: string | number | null | undefined) => string;
 
 declare const parseAmount: (value: string) => number | null;
 
-export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, type PastelColorPair, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };

package/dist/index.js

@@ -157,6 +157,7 @@ __export(index_exports, {
   getFileNameFromUrl: () => getFileNameFromUrl,
   getInitials: () => getInitials2,
   getMimeCategory: () => getMimeCategory,
+  getPastelColorPair: () => getPastelColorPair,
   getRelativeTime: () => getRelativeTime,
   isHoliday: () => isHoliday,
   isSameDay: () => isSameDay,
@@ -5323,6 +5324,7 @@ var MetricCard = ({
   iconBackgroundColor = "blue_50",
   iconColor = "blue_950",
   contentLayout = "col",
+  alignSelf,
   onClick,
   checked = false,
   children
@@ -5332,6 +5334,7 @@ var MetricCard = ({
     {
       padding: "16px",
       borderRadius: "6px",
+      alignSelf,
       style: {
         flex: 1,
         border: checked ? `1px solid ${colors.blue_950}` : void 0,
@@ -7209,6 +7212,48 @@ var getAvatarColor = (key) => {
   return AVATAR_COLORS[hashString(key) % AVATAR_COLORS.length];
 };
 
+// src/utils/string/getPastelColorPair.ts
+var PASTEL_COLORS = [
+  { background: "#ffe5e5", text: "#993333" },
+  { background: "#ffd9cc", text: "#994d33" },
+  { background: "#ffedcc", text: "#996633" },
+  { background: "#fff5cc", text: "#997a33" },
+  { background: "#f9ffcc", text: "#7a9933" },
+  { background: "#ecffcc", text: "#669933" },
+  { background: "#ddffcc", text: "#339933" },
+  { background: "#ccffd9", text: "#33996b" },
+  { background: "#ccffe5", text: "#339988" },
+  { background: "#ccfff5", text: "#339999" },
+  { background: "#ccf5ff", text: "#337a99" },
+  { background: "#ccecff", text: "#336699" },
+  { background: "#ccdfff", text: "#334d99" },
+  { background: "#ccd1ff", text: "#333399" },
+  { background: "#e5ccff", text: "#5c3399" },
+  { background: "#f2ccff", text: "#7a3399" },
+  { background: "#ffccf9", text: "#99337a" },
+  { background: "#ffcce5", text: "#993366" },
+  { background: "#ffccd9", text: "#99334d" },
+  { background: "#dbffcc", text: "#4d9933" },
+  { background: "#ccffe8", text: "#33997a" },
+  { background: "#daccff", text: "#443399" },
+  { background: "#ecccff", text: "#663399" },
+  { background: "#cce0ff", text: "#334d99" },
+  { background: "#f5ccff", text: "#7a3399" },
+  { background: "#ffcce8", text: "#993366" },
+  { background: "#f0ffcc", text: "#669933" },
+  { background: "#ccffd2", text: "#33994d" },
+  { background: "#ccffe0", text: "#339966" }
+];
+var getPastelColorPair = (firstName = "", lastName = "") => {
+  var _a, _b, _c, _d;
+  const fullName = ((_b = (_a = firstName == null ? void 0 : firstName.trim()) == null ? void 0 : _a.toLowerCase()) != null ? _b : "") + ((_d = (_c = lastName == null ? void 0 : lastName.trim()) == null ? void 0 : _c.toLowerCase()) != null ? _d : "");
+  let hash = 0;
+  for (let i = 0; i < fullName.length; i++) {
+    hash = fullName.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return PASTEL_COLORS[Math.abs(hash) % PASTEL_COLORS.length];
+};
+
 // src/utils/string/formatNameWithInitial.ts
 var formatNameWithInitial = (firstname, lastname) => {
   if (!firstname && !lastname) return null;
@@ -7399,6 +7444,7 @@ var parseAmount = (value) => {
   getFileNameFromUrl,
   getInitials,
   getMimeCategory,
+  getPastelColorPair,
   getRelativeTime,
   isHoliday,
   isSameDay,

package/dist/index.mjs

@@ -5203,6 +5203,7 @@ var MetricCard = ({
   iconBackgroundColor = "blue_50",
   iconColor = "blue_950",
   contentLayout = "col",
+  alignSelf,
   onClick,
   checked = false,
   children
@@ -5212,6 +5213,7 @@ var MetricCard = ({
     {
       padding: "16px",
       borderRadius: "6px",
+      alignSelf,
       style: {
         flex: 1,
         border: checked ? `1px solid ${colors.blue_950}` : void 0,
@@ -7089,6 +7091,48 @@ var getAvatarColor = (key) => {
   return AVATAR_COLORS[hashString(key) % AVATAR_COLORS.length];
 };
 
+// src/utils/string/getPastelColorPair.ts
+var PASTEL_COLORS = [
+  { background: "#ffe5e5", text: "#993333" },
+  { background: "#ffd9cc", text: "#994d33" },
+  { background: "#ffedcc", text: "#996633" },
+  { background: "#fff5cc", text: "#997a33" },
+  { background: "#f9ffcc", text: "#7a9933" },
+  { background: "#ecffcc", text: "#669933" },
+  { background: "#ddffcc", text: "#339933" },
+  { background: "#ccffd9", text: "#33996b" },
+  { background: "#ccffe5", text: "#339988" },
+  { background: "#ccfff5", text: "#339999" },
+  { background: "#ccf5ff", text: "#337a99" },
+  { background: "#ccecff", text: "#336699" },
+  { background: "#ccdfff", text: "#334d99" },
+  { background: "#ccd1ff", text: "#333399" },
+  { background: "#e5ccff", text: "#5c3399" },
+  { background: "#f2ccff", text: "#7a3399" },
+  { background: "#ffccf9", text: "#99337a" },
+  { background: "#ffcce5", text: "#993366" },
+  { background: "#ffccd9", text: "#99334d" },
+  { background: "#dbffcc", text: "#4d9933" },
+  { background: "#ccffe8", text: "#33997a" },
+  { background: "#daccff", text: "#443399" },
+  { background: "#ecccff", text: "#663399" },
+  { background: "#cce0ff", text: "#334d99" },
+  { background: "#f5ccff", text: "#7a3399" },
+  { background: "#ffcce8", text: "#993366" },
+  { background: "#f0ffcc", text: "#669933" },
+  { background: "#ccffd2", text: "#33994d" },
+  { background: "#ccffe0", text: "#339966" }
+];
+var getPastelColorPair = (firstName = "", lastName = "") => {
+  var _a, _b, _c, _d;
+  const fullName = ((_b = (_a = firstName == null ? void 0 : firstName.trim()) == null ? void 0 : _a.toLowerCase()) != null ? _b : "") + ((_d = (_c = lastName == null ? void 0 : lastName.trim()) == null ? void 0 : _c.toLowerCase()) != null ? _d : "");
+  let hash = 0;
+  for (let i = 0; i < fullName.length; i++) {
+    hash = fullName.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return PASTEL_COLORS[Math.abs(hash) % PASTEL_COLORS.length];
+};
+
 // src/utils/string/formatNameWithInitial.ts
 var formatNameWithInitial = (firstname, lastname) => {
   if (!firstname && !lastname) return null;
@@ -7278,6 +7322,7 @@ export {
   getFileNameFromUrl,
   getInitials2 as getInitials,
   getMimeCategory,
+  getPastelColorPair,
   getRelativeTime,
   isHoliday,
   isSameDay,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.295",
+  "version": "1.0.297",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",