design-zystem 1.0.240 → 1.0.242

package/dist/index.d.mts

@@ -64,6 +64,7 @@ interface RowProps extends HTMLAttributes<HTMLDivElement> {
     fullHeight?: boolean;
     width?: string;
     wrap?: string;
+    backgroundColor?: string;
     style?: CSSProperties;
     className?: string;
 }
@@ -890,6 +891,15 @@ interface SpinnerProps {
 }
 declare const Spinner: ({ size, color }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
+interface EmptyStateProps {
+    icon?: string;
+    title?: string;
+    description?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+}
+declare const EmptyState: ({ icon, title, description, actionLabel, onAction, }: EmptyStateProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * formatDate(date, type?, language?)
  * - language : fr/en/es/... (locale inferred), default "en"
@@ -936,4 +946,4 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, 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, 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, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -64,6 +64,7 @@ interface RowProps extends HTMLAttributes<HTMLDivElement> {
     fullHeight?: boolean;
     width?: string;
     wrap?: string;
+    backgroundColor?: string;
     style?: CSSProperties;
     className?: string;
 }
@@ -890,6 +891,15 @@ interface SpinnerProps {
 }
 declare const Spinner: ({ size, color }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
+interface EmptyStateProps {
+    icon?: string;
+    title?: string;
+    description?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+}
+declare const EmptyState: ({ icon, title, description, actionLabel, onAction, }: EmptyStateProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * formatDate(date, type?, language?)
  * - language : fr/en/es/... (locale inferred), default "en"
@@ -936,4 +946,4 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, 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, 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, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, 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, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };

package/dist/index.js

@@ -73,6 +73,7 @@ __export(index_exports, {
   DatePicker: () => DatePicker,
   Divider: () => Divider,
   Drawer: () => Drawer,
+  EmptyState: () => EmptyState,
   FileUploadZone: () => FileUploadZone,
   Grid: () => Grid,
   Icon: () => Icon,
@@ -410,15 +411,18 @@ var shouldForwardPropRow = (prop) => ![
   "fullWidth",
   "fullwidth",
   "margin",
-  "width"
+  "width",
+  "wrap",
+  "backgroundColor"
 ].includes(prop);
 var StyledRow = import_styled_components4.default.div.withConfig({
   shouldForwardProp: shouldForwardPropRow
 })`
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: ${(props) => props.wrap || "nowrap"};
   width: ${(props) => props.width || "100%"};
   max-height: 100%;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
   margin: ${(props) => props.margin || "0"};
   height: ${(props) => props.fullHeight ? `100%` : "auto"};
   gap: ${(props) => props.gap ? `${props.gap}px` : "0"};
@@ -5156,6 +5160,35 @@ var Spinner = ({ size = "m", color = "primary" }) => {
   );
 };
 
+// src/Components/EmptyState/EmptyState.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var EmptyState = ({
+  icon = "inbox",
+  title = "Aucun r\xE9sultat",
+  description = "Aucun \xE9l\xE9ment \xE0 afficher pour le moment.",
+  actionLabel,
+  onAction
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    Col,
+    {
+      fullWidth: true,
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "24",
+      padding: "24px 16px",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: icon, family: "solid", size: "xxl", color: "grey_300" }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Col, { alignItems: "center", gap: "4", style: { maxWidth: "360px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "m", weight: "600", variant: "grey_600", align: "center", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "s", variant: "grey_500", align: "center", children: description })
+        ] }),
+        actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { label: actionLabel, onClick: onAction })
+      ]
+    }
+  );
+};
+
 // src/data/globalMethods.ts
 var formatDate = (dateString, type = "date", language = "en") => {
   if (!dateString) return "";
@@ -5415,6 +5448,7 @@ var optimizeImage_default = optimizeImage;
   DatePicker,
   Divider,
   Drawer,
+  EmptyState,
   FileUploadZone,
   Grid,
   Icon,

package/dist/index.mjs

@@ -317,15 +317,18 @@ var shouldForwardPropRow = (prop) => ![
   "fullWidth",
   "fullwidth",
   "margin",
-  "width"
+  "width",
+  "wrap",
+  "backgroundColor"
 ].includes(prop);
 var StyledRow = styled4.div.withConfig({
   shouldForwardProp: shouldForwardPropRow
 })`
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: ${(props) => props.wrap || "nowrap"};
   width: ${(props) => props.width || "100%"};
   max-height: 100%;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
   margin: ${(props) => props.margin || "0"};
   height: ${(props) => props.fullHeight ? `100%` : "auto"};
   gap: ${(props) => props.gap ? `${props.gap}px` : "0"};
@@ -5078,6 +5081,35 @@ var Spinner = ({ size = "m", color = "primary" }) => {
   );
 };
 
+// src/Components/EmptyState/EmptyState.tsx
+import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
+var EmptyState = ({
+  icon = "inbox",
+  title = "Aucun r\xE9sultat",
+  description = "Aucun \xE9l\xE9ment \xE0 afficher pour le moment.",
+  actionLabel,
+  onAction
+}) => {
+  return /* @__PURE__ */ jsxs29(
+    Col,
+    {
+      fullWidth: true,
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "24",
+      padding: "24px 16px",
+      children: [
+        /* @__PURE__ */ jsx55(Icon, { name: icon, family: "solid", size: "xxl", color: "grey_300" }),
+        /* @__PURE__ */ jsxs29(Col, { alignItems: "center", gap: "4", style: { maxWidth: "360px" }, children: [
+          /* @__PURE__ */ jsx55(Text, { size: "m", weight: "600", variant: "grey_600", align: "center", children: title }),
+          description && /* @__PURE__ */ jsx55(Text, { size: "s", variant: "grey_500", align: "center", children: description })
+        ] }),
+        actionLabel && onAction && /* @__PURE__ */ jsx55(Button, { label: actionLabel, onClick: onAction })
+      ]
+    }
+  );
+};
+
 // src/data/globalMethods.ts
 var formatDate = (dateString, type = "date", language = "en") => {
   if (!dateString) return "";
@@ -5336,6 +5368,7 @@ export {
   DatePicker,
   Divider,
   Drawer,
+  EmptyState,
   FileUploadZone,
   Grid,
   Icon,

package/package.json

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