design-zystem 1.0.252 → 1.0.253

package/dist/index.d.mts

@@ -32,6 +32,8 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     justifyContent?: string;
     borderRadius?: string;
     border?: string;
+    /** Colored left accent bar (status/score encoding), painted over the box border. */
+    borderColor?: string;
     style?: CSSProperties;
 }
 declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -974,35 +976,6 @@ interface TimelineProps {
  */
 declare const Timeline: ({ items, lineColor, emptyLabel, }: TimelineProps) => react_jsx_runtime.JSX.Element;
 
-interface BorderedRowProps {
-    /** Accent color (DZ color token) — used to encode a score/status/level. */
-    borderColor?: string;
-    /** Accent thickness in px. */
-    borderWidth?: number;
-    /** Background color (DZ color token). */
-    background?: string;
-    /** Inner padding. */
-    padding?: string;
-    /** Corner radius — pass "0" for flush table rows, default rounded card. */
-    borderRadius?: string;
-    /**
-     * Accent style:
-     * - 'edge' (default): full-height colored left border (flush rows / score bars).
-     * - 'bar': short rounded inset accent bar, centered (white card look).
-     */
-    accent?: 'edge' | 'bar';
-    /** Subtle 1px full border around the card (card look). */
-    bordered?: boolean;
-    children: ReactNode;
-    onClick?: () => void;
-}
-/**
- * Row/card with a colored accent, used to encode a status (recovery score,
- * feedback level…). Flush table rows: accent="edge" + borderRadius="0".
- * White cards: accent="bar" + bordered + background.
- */
-declare const BorderedRow: ({ borderColor, borderWidth, background, padding, borderRadius, accent, bordered, children, onClick, }: BorderedRowProps) => react_jsx_runtime.JSX.Element;
-
 /**
  * formatDate(date, type?, language?)
  * - language : fr/en/es/... (locale inferred), default "en"
@@ -1021,6 +994,11 @@ declare const formatDistance: (distanceKm: number | string | null | undefined, l
 declare const formatDuration: (minutes: number | null | undefined, language?: string) => string;
 declare const truncateText: (text: string | null | undefined, maxLength?: number) => string;
 declare const truncateFileName: (fileName: string | null | undefined, maxLength?: number) => string;
+declare const formatEuro: (amount?: number | null) => string;
+declare const formatName: (person?: {
+    firstname?: string | null;
+    lastname?: string | null;
+} | null, fallback?: string) => string;
 
 /**
  * Optimiser image:
@@ -1049,4 +1027,4 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-export { Accordion, type AccordionItem, Avatar, BorderedRow, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, formatEuro, formatName, optimizeImage, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -32,6 +32,8 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     justifyContent?: string;
     borderRadius?: string;
     border?: string;
+    /** Colored left accent bar (status/score encoding), painted over the box border. */
+    borderColor?: string;
     style?: CSSProperties;
 }
 declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -974,35 +976,6 @@ interface TimelineProps {
  */
 declare const Timeline: ({ items, lineColor, emptyLabel, }: TimelineProps) => react_jsx_runtime.JSX.Element;
 
-interface BorderedRowProps {
-    /** Accent color (DZ color token) — used to encode a score/status/level. */
-    borderColor?: string;
-    /** Accent thickness in px. */
-    borderWidth?: number;
-    /** Background color (DZ color token). */
-    background?: string;
-    /** Inner padding. */
-    padding?: string;
-    /** Corner radius — pass "0" for flush table rows, default rounded card. */
-    borderRadius?: string;
-    /**
-     * Accent style:
-     * - 'edge' (default): full-height colored left border (flush rows / score bars).
-     * - 'bar': short rounded inset accent bar, centered (white card look).
-     */
-    accent?: 'edge' | 'bar';
-    /** Subtle 1px full border around the card (card look). */
-    bordered?: boolean;
-    children: ReactNode;
-    onClick?: () => void;
-}
-/**
- * Row/card with a colored accent, used to encode a status (recovery score,
- * feedback level…). Flush table rows: accent="edge" + borderRadius="0".
- * White cards: accent="bar" + bordered + background.
- */
-declare const BorderedRow: ({ borderColor, borderWidth, background, padding, borderRadius, accent, bordered, children, onClick, }: BorderedRowProps) => react_jsx_runtime.JSX.Element;
-
 /**
  * formatDate(date, type?, language?)
  * - language : fr/en/es/... (locale inferred), default "en"
@@ -1021,6 +994,11 @@ declare const formatDistance: (distanceKm: number | string | null | undefined, l
 declare const formatDuration: (minutes: number | null | undefined, language?: string) => string;
 declare const truncateText: (text: string | null | undefined, maxLength?: number) => string;
 declare const truncateFileName: (fileName: string | null | undefined, maxLength?: number) => string;
+declare const formatEuro: (amount?: number | null) => string;
+declare const formatName: (person?: {
+    firstname?: string | null;
+    lastname?: string | null;
+} | null, fallback?: string) => string;
 
 /**
  * Optimiser image:
@@ -1049,4 +1027,4 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-export { Accordion, type AccordionItem, Avatar, BorderedRow, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, formatEuro, formatName, optimizeImage, truncateFileName, truncateText };

package/dist/index.js

@@ -61,7 +61,6 @@ var index_exports = {};
 __export(index_exports, {
   Accordion: () => Accordion,
   Avatar: () => Avatar,
-  BorderedRow: () => BorderedRow,
   Box: () => Box,
   Bubble: () => Bubble,
   Bulk: () => Bulk,
@@ -122,6 +121,8 @@ __export(index_exports, {
   formatDate: () => formatDate,
   formatDistance: () => formatDistance,
   formatDuration: () => formatDuration,
+  formatEuro: () => formatEuro,
+  formatName: () => formatName,
   optimizeImage: () => optimizeImage_default,
   truncateFileName: () => truncateFileName,
   truncateText: () => truncateText
@@ -330,6 +331,7 @@ var shouldForwardProp2 = (prop) => ![
   "hasShadow",
   "borderRadius",
   "border",
+  "borderColor",
   "height"
 ].includes(prop);
 var StyledBox = import_styled_components2.default.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
@@ -339,6 +341,7 @@ var StyledBox = import_styled_components2.default.div.withConfig({ shouldForward
   var _a;
   return (_a = props.border) != null ? _a : `1px solid ${colors.grey_300}`;
 }};
+  ${(props) => props.borderColor ? `border-left: 4px solid ${colors[props.borderColor] || props.borderColor};` : ""}
 
   border-radius: ${(props) => props.borderRadius || "8px"};
 
@@ -5489,61 +5492,6 @@ var Timeline = ({
   }) });
 };
 
-// src/Components/BorderedRow/BorderedRow.tsx
-var import_styled_components48 = __toESM(require("styled-components"));
-var import_jsx_runtime59 = require("react/jsx-runtime");
-var Wrapper6 = import_styled_components48.default.div`
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  padding: ${({ $padding }) => $padding};
-  ${({ $accent, $borderWidth }) => $accent === "bar" ? `padding-left: ${$borderWidth + 16}px;` : ""}
-  border-radius: ${({ $borderRadius }) => $borderRadius};
-  background: ${({ $background }) => $background || "transparent"};
-  cursor: ${({ $clickable }) => $clickable ? "pointer" : "default"};
-  ${({ $bordered }) => $bordered ? `border: 1px solid ${colors.grey_300};` : ""}
-  ${({ $accent, $borderWidth, $borderColor }) => $accent === "edge" ? `border-left: ${$borderWidth}px solid ${$borderColor};` : ""}
-
-  ${({ $accent, $borderWidth, $borderColor }) => $accent === "bar" ? `
-    &::before {
-      content: '';
-      position: absolute;
-      left: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 62%;
-      width: ${$borderWidth}px;
-      border-radius: ${$borderWidth}px;
-      background: ${$borderColor};
-    }
-  ` : ""}
-`;
-var BorderedRow = ({
-  borderColor = colors.blue_700,
-  borderWidth = 4,
-  background,
-  padding = "12px",
-  borderRadius = "8px",
-  accent = "edge",
-  bordered = false,
-  children,
-  onClick
-}) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-  Wrapper6,
-  {
-    $borderColor: borderColor,
-    $borderWidth: borderWidth,
-    $background: background,
-    $padding: padding,
-    $borderRadius: borderRadius,
-    $accent: accent,
-    $bordered: bordered,
-    $clickable: !!onClick,
-    onClick,
-    children
-  }
-);
-
 // src/data/globalMethods.ts
 var formatDate = (dateString, type = "date", language = "en") => {
   if (!dateString) return "";
@@ -5653,6 +5601,14 @@ var truncateFileName = (fileName, maxLength = 20) => {
   }
   return fileName;
 };
+var formatEuro = (amount) => `${(amount != null ? amount : 0).toLocaleString("fr-FR", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+})} \u20AC`;
+var formatName = (person, fallback = "") => {
+  var _a, _b;
+  return person ? `${(_a = person.firstname) != null ? _a : ""} ${(_b = person.lastname) != null ? _b : ""}`.trim() || fallback : fallback;
+};
 
 // src/services/optimizeImage/optimizeImage.ts
 var hasDocument = () => typeof document !== "undefined";
@@ -5791,7 +5747,6 @@ var optimizeImage_default = optimizeImage;
 0 && (module.exports = {
   Accordion,
   Avatar,
-  BorderedRow,
   Box,
   Bubble,
   Bulk,
@@ -5852,6 +5807,8 @@ var optimizeImage_default = optimizeImage;
   formatDate,
   formatDistance,
   formatDuration,
+  formatEuro,
+  formatName,
   optimizeImage,
   truncateFileName,
   truncateText

package/dist/index.mjs

@@ -232,6 +232,7 @@ var shouldForwardProp2 = (prop) => ![
   "hasShadow",
   "borderRadius",
   "border",
+  "borderColor",
   "height"
 ].includes(prop);
 var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
@@ -241,6 +242,7 @@ var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 }
   var _a;
   return (_a = props.border) != null ? _a : `1px solid ${colors.grey_300}`;
 }};
+  ${(props) => props.borderColor ? `border-left: 4px solid ${colors[props.borderColor] || props.borderColor};` : ""}
 
   border-radius: ${(props) => props.borderRadius || "8px"};
 
@@ -5411,61 +5413,6 @@ var Timeline = ({
   }) });
 };
 
-// src/Components/BorderedRow/BorderedRow.tsx
-import styled48 from "styled-components";
-import { jsx as jsx59 } from "react/jsx-runtime";
-var Wrapper6 = styled48.div`
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  padding: ${({ $padding }) => $padding};
-  ${({ $accent, $borderWidth }) => $accent === "bar" ? `padding-left: ${$borderWidth + 16}px;` : ""}
-  border-radius: ${({ $borderRadius }) => $borderRadius};
-  background: ${({ $background }) => $background || "transparent"};
-  cursor: ${({ $clickable }) => $clickable ? "pointer" : "default"};
-  ${({ $bordered }) => $bordered ? `border: 1px solid ${colors.grey_300};` : ""}
-  ${({ $accent, $borderWidth, $borderColor }) => $accent === "edge" ? `border-left: ${$borderWidth}px solid ${$borderColor};` : ""}
-
-  ${({ $accent, $borderWidth, $borderColor }) => $accent === "bar" ? `
-    &::before {
-      content: '';
-      position: absolute;
-      left: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 62%;
-      width: ${$borderWidth}px;
-      border-radius: ${$borderWidth}px;
-      background: ${$borderColor};
-    }
-  ` : ""}
-`;
-var BorderedRow = ({
-  borderColor = colors.blue_700,
-  borderWidth = 4,
-  background,
-  padding = "12px",
-  borderRadius = "8px",
-  accent = "edge",
-  bordered = false,
-  children,
-  onClick
-}) => /* @__PURE__ */ jsx59(
-  Wrapper6,
-  {
-    $borderColor: borderColor,
-    $borderWidth: borderWidth,
-    $background: background,
-    $padding: padding,
-    $borderRadius: borderRadius,
-    $accent: accent,
-    $bordered: bordered,
-    $clickable: !!onClick,
-    onClick,
-    children
-  }
-);
-
 // src/data/globalMethods.ts
 var formatDate = (dateString, type = "date", language = "en") => {
   if (!dateString) return "";
@@ -5575,6 +5522,14 @@ var truncateFileName = (fileName, maxLength = 20) => {
   }
   return fileName;
 };
+var formatEuro = (amount) => `${(amount != null ? amount : 0).toLocaleString("fr-FR", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+})} \u20AC`;
+var formatName = (person, fallback = "") => {
+  var _a, _b;
+  return person ? `${(_a = person.firstname) != null ? _a : ""} ${(_b = person.lastname) != null ? _b : ""}`.trim() || fallback : fallback;
+};
 
 // src/services/optimizeImage/optimizeImage.ts
 var hasDocument = () => typeof document !== "undefined";
@@ -5712,7 +5667,6 @@ var optimizeImage_default = optimizeImage;
 export {
   Accordion,
   Avatar,
-  BorderedRow,
   Box,
   Bubble,
   Bulk,
@@ -5773,6 +5727,8 @@ export {
   formatDate,
   formatDistance,
   formatDuration,
+  formatEuro,
+  formatName,
   optimizeImage_default as optimizeImage,
   truncateFileName,
   truncateText

package/package.json

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