@colisweb/rescript-toolkit 2.19.0 → 2.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.19.0",
+  "version": "2.22.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",

package/src/ui/Toolkit__Ui_Card.res

@@ -11,8 +11,9 @@ module Header = {
     ~children=React.null,
     ~action: option<action>=?,
     ~actionDisabled: option<bool>=?,
+    ~containerClassName="",
   ) =>
-    <div className="flex flex-row items-center mb-4">
+    <div className={cx(["flex flex-row items-center mb-4", containerClassName])}>
       <div
         className={cx([
           className,

package/src/ui/Toolkit__Ui_Card.resi

@@ -10,6 +10,7 @@ module Header: {
     ~children: React.element=?,
     ~action: action=?,
     ~actionDisabled: bool=?,
+    ~containerClassName: string=?,
   ) => React.element
 }
 

package/src/ui/Toolkit__Ui_Checkbox.res

@@ -25,15 +25,22 @@ let make = (
   ~className="",
   ~size: size=#sm,
   ~checkboxClassName="",
-) =>
+  ~checkedClassname="",
+  ~checkedCheckboxClassName="",
+  ~inverseLabel=false,
+  ~hideLabel=false,
+) => {
+  let (isChecked, setChecked) = React.useState(() => checked->Option.getWithDefault(false))
   <label
     className={cx([
       Styles.label,
-      "flex items-center",
+      "items-center",
+      inverseLabel ? "inline-flex flex-row-reverse justify-end" : "flex flex-row",
       disabled->Option.getWithDefault(false)
         ? "cursor-not-allowed opacity-75 text-gray-600"
         : "cursor-pointer",
       className,
+      isChecked ? checkedClassname : "",
     ])}>
     <input
       type_="checkbox"
@@ -44,6 +51,7 @@ let make = (
         let checked = target["checked"]
         let value = target["value"]
 
+        setChecked(_ => checked)
         onChange->Option.forEach(fn => fn(checked, value))
       }}
       ?disabled
@@ -52,14 +60,16 @@ let make = (
     />
     <span
       className={cx([
-        "checkmark rounded border text-white mr-3 border-neutral-300 transform transition-all ease-in-out flex items-center justify-center flex-shrink-0",
+        "checkmark rounded border text-white border-neutral-300 transform transition-all ease-in-out flex items-center justify-center flex-shrink-0",
         switch size {
         | #xs => "w-4 h-4"
         | #sm => "w-6 h-6"
         | #md => "w-8 h-8"
         | #lg => "w-10 h-10"
         },
+        hideLabel ? "" : inverseLabel ? "ml-3" : "mr-3",
         checkboxClassName,
+        isChecked ? checkedCheckboxClassName : "",
       ])}>
       <BsReactIcons.FaCheck
         className="transform transition-all ease-in-out"
@@ -71,5 +81,6 @@ let make = (
         }}
       />
     </span>
-    {children->Option.getWithDefault(React.null)}
+    {children->Option.mapWithDefault(React.null, children => hideLabel ? React.null : children)}
   </label>
+}

package/src/ui/Toolkit__Ui_Checkbox.resi

@@ -11,4 +11,8 @@ let make: (
   ~className: string=?,
   ~size: size=?,
   ~checkboxClassName: string=?,
+  ~checkedClassname: string=?,
+  ~checkedCheckboxClassName: string=?,
+  ~inverseLabel: bool=?,
+  ~hideLabel: bool=?,
 ) => React.element