@colisweb/rescript-toolkit 4.27.2 → 4.28.0

package/package.json

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

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 {

package/src/vendors/Browser.resi

@@ -38,9 +38,10 @@ module DomElement: {
   external toDomElement: 'a => Dom.element = "%identity"
 
   @send
-  external addEventListener: (Dom.element, ReactEvent.Form.t => unit) => unit = "addEventListener"
+  external addEventListener: (Dom.element, string, ReactEvent.Form.t => unit) => unit =
+    "addEventListener"
   @send
-  external removeEventListener: (Dom.element, ReactEvent.Form.t => unit) => unit =
+  external removeEventListener: (Dom.element, string, ReactEvent.Form.t => unit) => unit =
     "removeEventListener"
 
   module ClassList: {