@colisweb/rescript-toolkit 4.28.0 → 4.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "4.28.0",
+  "version": "4.29.1",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/ui/Toolkit__Ui_Alert.res

@@ -1,10 +1,18 @@
 type status = [#success | #error | #warning | #info]
-
+type size = [#xs | #sm | #md]
 @react.component
-let make = (~title, ~description=?, ~status, ~className=?) =>
+let make = (
+  ~title,
+  ~description=?,
+  ~status,
+  ~className=?,
+  ~icon: option<module(ReactIcons.Icon)>=?,
+  ~size: size=#md,
+  ~borderless=false,
+) =>
   <div
     className={cx([
-      "p-4 flex items-center border rounded-lg",
+      "flex  border rounded-lg",
       switch status {
       | #success => "bg-success-50 border-success-500"
       | #error => "bg-danger-50 border-danger-500"
@@ -12,15 +20,33 @@ let make = (~title, ~description=?, ~status, ~className=?) =>
       | #info => "bg-info-50 border-info-500"
       },
       className->Option.getWithDefault(""),
+      switch size {
+      | #md => "p-4"
+      | #sm => "p-2"
+      | #xs => "p-1"
+      },
+      borderless ? "!border-none" : "",
     ])}>
-    {switch status {
-    | #success => <ReactIcons.MdCheckCircle size=28 className="text-success-600 flex-shrink-0" />
-    | #error => <ReactIcons.MdWarning size=28 className="text-danger-600 flex-shrink-0" />
-    | #warning =>
+    {switch (status, icon) {
+    | (#success, None) =>
+      <ReactIcons.MdCheckCircle size=28 className="text-success-600 flex-shrink-0" />
+    | (#success, Some(module(Icon))) => <Icon size=28 className="text-success-600 flex-shrink-0" />
+    | (#error, None) => <ReactIcons.MdWarning size=28 className="text-danger-600 flex-shrink-0" />
+    | (#error, Some(module(Icon))) => <Icon size=28 className="text-danger-600 flex-shrink-0" />
+    | (#warning, None) =>
       <ReactIcons.FaExclamationTriangle size=28 className="text-warning-600 flex-shrink-0" />
-    | #info => <ReactIcons.FaInfoCircle size=28 className="text-info-600 flex-shrink-0" />
+    | (#warning, Some(module(Icon))) => <Icon size=28 className="text-warning-600 flex-shrink-0" />
+    | (#info, None) => <ReactIcons.FaInfoCircle size=28 className="text-info-600 flex-shrink-0" />
+    | (#info, Some(module(Icon))) => <Icon size=28 className="text-info-600 flex-shrink-0" />
     }}
-    <div className="mx-3">
+    <div
+      className={cx([
+        switch size {
+        | #md => "mx-3"
+        | #sm => "mx-2"
+        | #xs => "mx-1"
+        },
+      ])}>
       <div
         className={cx([
           description->Option.isSome ? "font-semibold" : "",

package/src/ui/Toolkit__Ui_Alert.resi

@@ -1,4 +1,5 @@
 type status = [#success | #error | #warning | #info]
+type size = [#xs | #sm | #md]
 
 @react.component
 let make: (
@@ -6,4 +7,7 @@ let make: (
   ~description: React.element=?,
   ~status: status,
   ~className: string=?,
+  ~icon: module(ReactIcons.Icon)=?,
+  ~size: size=?,
+  ~borderless: bool=?,
 ) => React.element

package/src/vendors/ReactIcons.res

@@ -6152,3 +6152,9 @@ module MdBarcodeReader = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "MdBarcodeReader"
 }
+
+module FaChevronCircleRight = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaChevronCircleRight"
+}