@colisweb/rescript-toolkit 4.27.3 → 4.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "4.27.3",
+  "version": "4.29.0",
   "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/ui/Toolkit__Ui_Radio.res

@@ -1,5 +1,4 @@
 type size = [#xs | #sm | #md | #lg]
-
 @react.component
 let make = (
   ~value,
@@ -13,7 +12,7 @@ let make = (
 ) =>
   <label
     className={cx([
-      "flex items-center",
+      "flex items-center cw-radio",
       disabled->Option.getWithDefault(false)
         ? "cursor-not-allowed opacity-75 text-gray-600"
         : "cursor-pointer",
@@ -22,7 +21,7 @@ let make = (
     <input
       type_="radio"
       value
-      className="opacity-0 w-0 h-0 peer"
+      className="opacity-0 w-0 h-0 peer cw-radio-input"
       onChange={event => {
         let target = ReactEvent.Form.target(event)
         let value = target["value"]
@@ -35,9 +34,9 @@ let make = (
     />
     <span
       className={cx([
-        "bg-white peer-focus:shadow-sm peer-focus:shadow-primary-500",
-        "peer-checked:border-primary-500 peer-checked:bg-primary-500",
-        "checkmark rounded-full border text-white mr-3 border-neutral-300 transform transition-all ease-in-out flex items-center justify-center",
+        "bg-white  flex-shrink-0 cw-radio-circle",
+        "peer-checked:border-primary-700 peer-checked:text-primary-700",
+        "checkmark rounded-full border-2 text-white mr-3 border-neutral-700 transform transition-all ease-in-out flex items-center justify-center",
         switch size {
         | #xs => "w-4 h-4"
         | #sm => "w-6 h-6"
@@ -45,14 +44,16 @@ let make = (
         | #lg => "w-10 h-10"
         },
       ])}>
-      <ReactIcons.FaCircle
-        className="transform transition-all ease-in-out"
-        size={switch size {
-        | #xs => 8
-        | #sm => 12
-        | #md => 18
-        | #lg => 24
-        }}
+      <span
+        className={cx([
+          "transform transition-all ease-in-out cw-radio-circle-content rounded-full",
+          switch size {
+          | #xs => "w-2 h-2"
+          | #sm => "w-3 h-3"
+          | #md => "w-4 h-4"
+          | #lg => "w-6 h-6"
+          },
+        ])}
       />
     </span>
     {children->Option.getWithDefault(React.null)}

package/src/ui/styles.css

@@ -20,6 +20,13 @@
   .cw-menu-item {
     @apply text-sm text-left font-text hover:bg-primary-700 hover:text-white w-full p-2 rounded;
   }
+
+  .cw-radio
+    .cw-radio-input:checked
+    ~ .cw-radio-circle
+    > .cw-radio-circle-content {
+    @apply bg-primary-700;
+  }
 }
 
 :root {