@colisweb/rescript-toolkit 5.44.5 → 5.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.44.5",
+  "version": "5.46.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -35,6 +35,8 @@
     "@greenlabs/ppx-spice": "0.2.1",
     "@headlessui/react": "2.2.1",
     "@headlessui/tailwindcss": "0.2.2",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-dropdown-menu": "2.1.7",
     "@radix-ui/react-popover": "1.1.7",
     "@radix-ui/react-scroll-area": "1.2.4",

package/src/decoders/Toolkit__Decoders.res

@@ -73,6 +73,30 @@ module Date = {
   type t = @spice.codec(codec) date
 }
 
+module LocalDate = {
+  type date = Js.Date.t
+
+  let encoder: Spice.encoder<date> = date =>
+    date->DateFns.formatWithPattern("yyyy-MM-dd")->Spice.stringToJson
+
+  let decoder: Spice.decoder<date> = json =>
+    switch Spice.stringFromJson(json) {
+    | Ok(v) =>
+      DateFns.parseWithPatternWithOptions(
+        v,
+        "yyyy-MM-dd",
+        Js.Date.make()->DateFns.startOfDay,
+        {locale: DateFns.frLocale},
+      )->Ok
+    | Error(_) as err => err
+    }
+
+  let codec: Spice.codec<date> = (encoder, decoder)
+
+  @spice
+  type t = @spice.codec(codec) date
+}
+
 module LocalDatetime = {
   type date = Js.Date.t
 

package/src/router/Toolkit__Router.res

@@ -237,7 +237,7 @@ module Make = (Config: RouterConfig) => {
     let make = () => <div className="border-b" />
   }
 
-  let commonClassName = "flex items-center py-3 hover:bg-primary-100 focus:bg-primary-100 focus:shadow-none text-neutral-700 rounded relative font-semibold transition-all ease-linear duration-200"
+  let commonClassName = "flex items-center py-3 hover:bg-primary-100 focus:bg-primary-100 focus:shadow-none text-neutral-700 rounded relative font-semibold transition-all ease-linear duration-200 overflow-hidden"
 
   module SingleLink = {
     @react.component
@@ -262,7 +262,7 @@ module Make = (Config: RouterConfig) => {
           className={cx([
             commonClassName,
             "py-3 sidenav-link",
-            isSubLink ? "ml-3" : "",
+            isSubLink ? "group-hover:ml-3" : "",
             containerClassName,
           ])}>
           <span className="overflow-hidden flex">
@@ -272,21 +272,13 @@ module Make = (Config: RouterConfig) => {
             <span
               className={cx([
                 "transition-all duration-200 ease-in-out absolute ml-12 w-40 transform top-1/2 -translate-y-1/2",
-                isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
-                isSubLink ? "text-sm" : "",
+                "lg:opacity-0 group-hover:opacity-100 group-hover:delay-100",
+                // isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
+                isSubLink ? "text-sm focus:bg-primary-200" : "",
                 labelClassName,
               ])}>
               label
             </span>
-            {isNavOpen
-              ? React.null
-              : <div
-                  className={cx([
-                    "sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap",
-                    tooltipClassName,
-                  ])}>
-                  label
-                </div>}
           </span>
         </a>
       | App(config) =>
@@ -298,12 +290,15 @@ module Make = (Config: RouterConfig) => {
           route
           className={cx([
             commonClassName,
-            isSubLink ? "ml-3" : "",
             config.icon->Option.isNone ? "py-5" : "",
             "sidenav-link",
             containerClassName,
+            isActive && isSubLink && !disabledActiveLink
+              ? "bg-primary-100/50 text-neutral-700"
+              : "",
             isActive && !disabledActiveLink ? "bg-primary-100/75 text-neutral-700" : "",
             isActive && !disabledActiveLink ? activeClassName : "",
+            isSubLink ? "group-hover:ml-3" : "",
           ])}
           activeClassName={cx([
             disabledActiveLink ? "" : "bg-primary-100/75 text-neutral-700",
@@ -317,21 +312,13 @@ module Make = (Config: RouterConfig) => {
             <span
               className={cx([
                 "transition-all duration-200 ease-in-out absolute ml-12 w-40 transform top-1/2 -translate-y-1/2",
-                isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
+                "lg:opacity-0 group-hover:opacity-100 group-hover:delay-100",
+                // isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
                 isSubLink ? "text-sm" : "",
                 labelClassName,
               ])}>
               label
             </span>
-            {isNavOpen
-              ? React.null
-              : <div
-                  className={cx([
-                    "sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap",
-                    tooltipClassName,
-                  ])}>
-                  label
-                </div>}
           </span>
         </Link>
       }
@@ -366,7 +353,6 @@ module Make = (Config: RouterConfig) => {
       ~links: array<link>,
       ~isNavOpen: bool,
       ~onLinkClick=() => (),
-      ~openMenu,
       ~iconClassName="",
       ~labelClassName="",
     ) => {
@@ -403,7 +389,6 @@ module Make = (Config: RouterConfig) => {
       <React.Fragment>
         <button
           onClick={_ => {
-            openMenu()
             toggle()
           }}
           className={cx([
@@ -411,19 +396,22 @@ module Make = (Config: RouterConfig) => {
             "flex items-center w-full sidenav-link",
             hasActiveSubRoute || relativeRoute->Option.isSome ? "bg-primary-100/75" : "",
           ])}>
-          <span
-            className={cx(["mr-2 text-neutral-800", isNavOpen ? "pl-2" : "px-2", iconClassName])}>
+          <span className={cx(["mr-2 text-neutral-800 px-2", iconClassName])}>
             groupInfo.icon
           </span>
           <span
             className={cx([
               "transition-all duration-200 ease-in-out absolute ml-12 w-40 transform top-1/2 -translate-y-1/2 text-left",
-              isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
+              "lg:opacity-0 group-hover:opacity-100 group-hover:delay-100",
               labelClassName,
             ])}>
             groupInfo.label
           </span>
-          <span className={cx(["absolute right-0 mr-2", isNavOpen ? "opacity-100" : "opacity-0"])}>
+          <span
+            className={cx([
+              "absolute right-0 mr-2 group-hover:opacity-100 delay-100",
+              isNavOpen ? "opacity-100" : "opacity-0",
+            ])}>
             <ReactIcons.MdKeyboardArrowRight
               size=24
               className={cx([
@@ -432,12 +420,6 @@ module Make = (Config: RouterConfig) => {
               ])}
             />
           </span>
-          {isNavOpen
-            ? React.null
-            : <div
-                className="sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap">
-                groupInfo.label
-              </div>}
         </button>
         <div
           className={cx([

package/src/tailwind/tailwind.config.cjs

@@ -23,6 +23,8 @@ module.exports = {
       },
       animation: {
         backforth: "backforth 2s ease-in-out infinite",
+        overlayShow: "overlayShow 200ms cubic-bezier(0.16, 1, 0.3, 1)",
+        contentShow: "contentShow 300ms cubic-bezier(0.16, 1, 0.3, 1)",
       },
       keyframes: {
         backforth: {
@@ -30,6 +32,17 @@ module.exports = {
           "50%": { left: "100%" },
           "100%": { left: "0px" },
         },
+        overlayShow: {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        contentShow: {
+          from: {
+            opacity: "0",
+            transform: "scale(0.95)",
+          },
+          to: { opacity: "1", transform: "scale(1)" },
+        },
       },
     },
     screens: {

package/src/ui/Toolkit__Ui_DropdownMenu.res

@@ -8,38 +8,23 @@ type itemContent = {
   ...DropdownMenu.Item.options,
   ...item,
 }
+type checkboxItemContent = {
+  ...DropdownMenu.CheckboxItem.options,
+  ...item,
+}
 type subTrigger = {...DropdownMenu.SubTrigger.options, ...item}
 
-type content =
+type rec content =
   | Item(itemContent)
+  | CheckboxItem(checkboxItemContent)
   | Separator
   | Label(React.element)
-  | SubItems(subTrigger, array<itemContent>)
+  | SubItems(subTrigger, array<content>)
 
 %%private(let renderRightSlot = rightSlot => <div className="RightSlot"> rightSlot </div>)
 
-@react.component
-let make = (
-  ~trigger,
-  ~triggerOptions: option<DropdownMenu.Trigger.options>=?,
-  ~rootOptions: option<DropdownMenu.Root.options>=?,
-  ~contentOptions: option<DropdownMenu.Content.options>=?,
-  ~content: array<content>,
-) => {
-  <DropdownMenu.Root {...(rootOptions->Option.getWithDefault({})->Obj.magic)}>
-    <DropdownMenu.Trigger {...(triggerOptions->Option.getWithDefault({})->Obj.magic)}>
-      trigger
-    </DropdownMenu.Trigger>
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content
-        {...(contentOptions->Option.getWithDefault({})->Obj.magic)}
-        className="DropdownMenuContent"
-        sideOffset={contentOptions
-        ->Option.flatMap(v => v.sideOffset)
-        ->Option.getWithDefault(5)}>
-        {content
-        ->Array.mapWithIndex((i, content) => {
-          switch content {
+
+let rec renderContent = (content, i) => switch content {
           | Label(element) =>
             <DropdownMenu.Label
               key={i->Int.toString ++ "dropdown-menu-item"} className="DropdownMenuLabel">
@@ -58,6 +43,21 @@ let make = (
               {item.label}
               {item.rightSlot->Option.mapWithDefault(React.null, renderRightSlot)}
             </DropdownMenu.Item>
+          | CheckboxItem(item) =>
+            <DropdownMenu.CheckboxItem
+              key={i->Int.toString ++ "dropdown-menu-item"}
+              className="DropdownMenuCheckboxItem"
+              checked={item.checked}
+              disabled=?{item.disabled}
+              textValue=?{item.textValue}
+              onCheckedChange={item.onCheckedChange}
+              onSelect=?{item.onSelect}>
+              <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
+                <ReactIcons.FaCheck size=8 />
+              </DropdownMenu.ItemIndicator>
+              {item.label}
+              {item.rightSlot->Option.mapWithDefault(React.null, renderRightSlot)}
+            </DropdownMenu.CheckboxItem>
 
           | SubItems(item, subContent) =>
             <DropdownMenu.Sub key={i->Int.toString ++ "dropdown-menu-item"}>
@@ -70,20 +70,36 @@ let make = (
                   className="DropdownMenuSubContent" sideOffset={2} alignOffset={-5}>
                   {subContent
                   ->Array.mapWithIndex((j, item) => {
-                    <DropdownMenu.Item
-                      key={i->Int.toString ++ j->Int.toString ++ "dropdown-menu-item"}
-                      disabled=?{item.disabled}
-                      onSelect=?{item.onSelect}
-                      className="DropdownMenuItem">
-                      {item.label}
-                      {item.rightSlot->Option.mapWithDefault(React.null, renderRightSlot)}
-                    </DropdownMenu.Item>
+                   renderContent(item,j)
                   })
                   ->React.array}
                 </DropdownMenu.SubContent>
               </DropdownMenu.Portal>
             </DropdownMenu.Sub>
           }
+          
+@react.component
+let make = (
+  ~trigger,
+  ~triggerOptions: option<DropdownMenu.Trigger.options>=?,
+  ~rootOptions: option<DropdownMenu.Root.options>=?,
+  ~contentOptions: option<DropdownMenu.Content.options>=?,
+  ~content: array<content>,
+) => {
+  <DropdownMenu.Root {...(rootOptions->Option.getWithDefault({})->Obj.magic)}>
+    <DropdownMenu.Trigger {...(triggerOptions->Option.getWithDefault({})->Obj.magic)}>
+      trigger
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content
+        {...(contentOptions->Option.getWithDefault({})->Obj.magic)}
+        className="DropdownMenuContent"
+        sideOffset={contentOptions
+        ->Option.flatMap(v => v.sideOffset)
+        ->Option.getWithDefault(5)}>
+        {content
+        ->Array.mapWithIndex((i, content) => {
+          renderContent(content,i)
         })
         ->React.array}
         <DropdownMenu.Arrow className="DropdownMenuArrow" />

package/src/ui/Toolkit__Ui_Layout.res

@@ -39,7 +39,8 @@ module App = {
         className="bg-white h-16 border-b flex items-center px-1 justify-between fixed top-0 left-0 w-full z-40 print:hidden">
         <div className="flex items-center px-1 gap-1">
           <button
-            onClick=toggleMenu className="text-neutral-800 hover:bg-neutral-300 rounded-full p-2">
+            onClick=toggleMenu
+            className="text-neutral-800 hover:bg-neutral-300 rounded-full p-2 block lg:hidden">
             <ReactIcons.MdMenu size=32 />
           </button>
           <a
@@ -52,7 +53,7 @@ module App = {
             <img
               src={logoSrc->Option.getWithDefault("/assets/logo.svg")}
               alt="Colisweb"
-              className="w-16 ml-4"
+              className="w-16"
             />
           </a>
           {environment->Option.mapWithDefault(React.null, environment => {
@@ -112,8 +113,8 @@ module App = {
       <React.Fragment>
         <nav
           className={cx([
-            "sidenav",
-            "lg:flex border-r px-2 py-3 fixed flex-col bg-white justify-between transition-all duration-300 ease-in-out z-40 print:hidden",
+            "sidenav group",
+            "lg:flex border-r px-2 py-3 fixed flex-col hover:w-64 bg-white justify-between transition-all duration-300 ease-in-out z-40 print:hidden hover:overflow-y-auto",
             isNavOpen ? "w-64 overflow-y-auto" : "w-16 hidden sidenav--closed",
           ])}>
           {children({onLinkClick, isNavOpen, openMenu})}
@@ -121,7 +122,7 @@ module App = {
             <div className={!isNavOpen ? "overflow-hidden" : ""}>
               <div
                 className={cx([
-                  "flex flex-col justify-end transition-all duration-300 ease-in-out w-[14.75rem]",
+                  "flex flex-col group-hover:opacity-100 justify-end transition-all duration-300 ease-in-out w-[14.75rem]",
                   isNavOpen ? "opacity-100" : "opacity-0",
                 ])}>
                 content
@@ -153,23 +154,12 @@ module App = {
     ~logoSrc=?,
     ~environment=?,
   ) => {
-    let {isLg} = Toolkit__Hooks.useMediaQuery()
-    let (isNavOpen, setOpen) = React.useState(() =>
-      Browser.LocalStorage.getItem(localStorageNavKey)
-      ->Js.Nullable.toOption
-      ->Option.flatMap(value => value->bool_of_string_opt)
-      ->Option.flatMap(isOpen => isLg ? Some(isOpen) : None)
-      ->Option.getWithDefault(false)
-    )
+    let (isNavOpen, setOpen) = React.useState(() => false)
 
     let toggleMenu = React.useCallback(_ =>
       setOpen(value => {
         let newValue = !value
 
-        Browser.LocalStorage.setItem(
-          localStorageNavKey,
-          newValue->string_of_bool->Js.Nullable.return,
-        )
         newValue
       })
     , [])
@@ -187,8 +177,8 @@ module App = {
           <main
             className={cx([
               className,
-              "flex-initial w-full transition-all duration-300 ease-in-out mt-16 z-20 print:mt-0 print:!pl-0",
-              isNavOpen ? "navOpen lg:pl-64" : "lg:pl-16",
+              "flex-initial w-full lg:pl-16 transition-all duration-300 ease-in-out mt-16 z-20 print:mt-0 print:!pl-0",
+              isNavOpen ? "navOpen " : "",
             ])}>
             children
           </main>

package/src/ui/Toolkit__Ui_Modal.res

@@ -118,3 +118,89 @@ let make = (
       </HeadlessUi.Dialog.Panel>
     </div>
   </HeadlessUi.Dialog>
+
+module Radix = {
+  open Radix
+  @react.component
+  let make = (
+    ~isVisible,
+    ~title: option<React.element>=?,
+    ~body: React.element,
+    ~hide,
+    ~size=#md,
+    ~type_=#default,
+    ~footer=?,
+    ~ariaLabel="",
+    ~icon: option<module(ReactIcons.Icon)>=?,
+  ) => {
+    // let (isOpen, setIsOpen) = React.useState(() => isVisible)
+    <Dialog.Root
+      \"open"=isVisible
+      onOpenChange={isOpen => {
+        if !isOpen {
+          hide()
+        }
+      }}>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className="z-40 fixed inset-0 bg-black/30 data-[state=open]:animate-overlayShow"
+        />
+        <div
+          className="z-50 fixed inset-0 overflow-y-auto flex min-h-full items-start justify-center p-4">
+          <Dialog.Content
+            className={cx([
+              "bg-white pb-5 shadow-lg w-full mt-[10vh] data-[state=open]:animate-contentShow",
+              modalStyle(~type_),
+            ])}
+            style={ReactDOMStyle.make(
+              ~maxWidth={
+                let value = switch size {
+                | #xs => 480
+                | #sm => 600
+                | #md => 768
+                | #lg => 900
+                | #custom(value) => value
+                }
+                `${value->Int.toString}px`
+              },
+              (),
+            )}>
+            <header
+              className={cx([
+                "flex items-center justify-between mb-4 pl-5 pr-3 pt-2 pb-1",
+                headerStyle(~type_),
+              ])}>
+              {title->Option.mapWithDefault(React.null, title =>
+                <Dialog.Title
+                  className={cx([
+                    "text-2xl pb-1 inline-flex items-center gap-2 font-display",
+                    titleStyle(~type_),
+                  ])}>
+                  {icon->Option.mapWithDefault(React.null, icon => {
+                    let module(Icon) = icon
+
+                    <Icon />
+                  })}
+                  title
+                </Dialog.Title>
+              )}
+              <button
+                onClick={_ => hide()}
+                className={cx([
+                  title->Option.isSome ? "ml-4" : "ml-auto",
+                  "p-1 rounded-full modal-close-button",
+                  closeIconStyle(~type_),
+                ])}>
+                <ReactIcons.MdClose size=28 />
+              </button>
+            </header>
+            <div className="px-1 sm:px-2 md:px-5"> body </div>
+            {footer->Option.mapWithDefault(React.null, footer =>
+              <div className="flex flex-row justify-end mt-6 pr-4"> footer </div>
+            )}
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  }
+}

package/src/ui/Toolkit__Ui_Modal.resi

@@ -14,3 +14,18 @@ let make: (
   ~ariaLabel: string=?,
   ~icon: module(ReactIcons.Icon)=?,
 ) => React.element
+
+module Radix: {
+  @react.component
+  let make: (
+    ~isVisible: bool,
+    ~title: React.element=?,
+    ~body: React.element,
+    ~hide: unit => unit,
+    ~size: size=?, // default: `md
+    ~type_: style=?, // default: `default
+    ~footer: React.element=?,
+    ~ariaLabel: string=?,
+    ~icon: module(ReactIcons.Icon)=?,
+  ) => React.element
+}

package/src/ui/Toolkit__Ui_NativeDatePicker.res

@@ -1,6 +1,14 @@
 @react.component
-let make = (~onChange, ~value=?, ~id=?, ~disabled=false, ~isInvalid=false, ~className="") =>
-  <div className="relative">
+let make = (
+  ~onChange,
+  ~value=?,
+  ~id=?,
+  ~disabled=false,
+  ~isInvalid=false,
+  ~className="",
+  ~containerClassName="",
+) =>
+  <div className={cx(["relative", containerClassName])}>
     <input
       ?id
       value=?{value->Option.map(d => d->DateFns.formatWithPattern("yyyy-MM-dd"))}

package/src/ui/Toolkit__Ui_NativeDatePicker.resi

@@ -6,4 +6,5 @@ let make: (
   ~disabled: bool=?,
   ~isInvalid: bool=?,
   ~className: string=?,
+  ~containerClassName: string=?,
 ) => React.element

package/src/vendors/DateFns.res

@@ -49,6 +49,16 @@ external isWithinInterval: (Js.Date.t, intervalObject) => bool = "isWithinInterv
 
 // parse
 
+type parseOptions = {locale?: dateFnsLocale}
+
+@module("date-fns")
+external parse: string => Js.Date.t = "parse"
+@module("date-fns")
+external parseWithPattern: (string, string) => Js.Date.t = "parse"
+@module("date-fns")
+external parseWithPatternWithOptions: (string, string, Js.Date.t, parseOptions) => Js.Date.t =
+  "parse"
+
 @module("date-fns")
 external parseISO: string => Js.Date.t = "parseISO"
 
@@ -137,6 +147,21 @@ external isSameMonth: (Js.Date.t, Js.Date.t) => bool = "isSameMonth"
 @module("date-fns")
 external isFirstDayOfMonth: Js.Date.t => bool = "isFirstDayOfMonth"
 
+@module("date-fns")
+external isMonday: Js.Date.t => bool = "isMonday"
+@module("date-fns")
+external isTuesday: Js.Date.t => bool = "isTuesday"
+@module("date-fns")
+external isWednesday: Js.Date.t => bool = "isWednesday"
+@module("date-fns")
+external isThursday: Js.Date.t => bool = "isThursday"
+@module("date-fns")
+external isFriday: Js.Date.t => bool = "isFriday"
+@module("date-fns")
+external isSaturday: Js.Date.t => bool = "isSaturday"
+@module("date-fns")
+external isSunday: Js.Date.t => bool = "isSunday"
+
 // other
 
 @module("date-fns")
@@ -149,9 +174,6 @@ external getDay: Js.Date.t => int = "getDay"
 @module("date-fns")
 external getHours: Js.Date.t => int = "getHours"
 
-@module("date-fns")
-external parse: string => Js.Date.t = "parse"
-
 @module("date-fns")
 external nextTuesday: Js.Date.t => Js.Date.t = "nextTuesday"
 @module("date-fns")
@@ -166,19 +188,9 @@ external nextSaturday: Js.Date.t => Js.Date.t = "nextSaturday"
 external nextSunday: Js.Date.t => Js.Date.t = "nextSunday"
 
 @module("date-fns")
-external isMonday: Js.Date.t => bool = "isMonday"
-@module("date-fns")
-external isTuesday: Js.Date.t => bool = "isTuesday"
-@module("date-fns")
-external isWednesday: Js.Date.t => bool = "isWednesday"
-@module("date-fns")
-external isThursday: Js.Date.t => bool = "isThursday"
-@module("date-fns")
-external isFriday: Js.Date.t => bool = "isFriday"
-@module("date-fns")
-external isSaturday: Js.Date.t => bool = "isSaturday"
-@module("date-fns")
-external isSunday: Js.Date.t => bool = "isSunday"
+external minutesToHours: int => int = "minutesToHours"
 
 @module("date-fns")
-external minutesToHours: int => int = "minutesToHours"
+external max: array<Js.Date.t> => Js.Date.t = "max"
+@module("date-fns")
+external min: array<Js.Date.t> => Js.Date.t = "min"

package/src/vendors/Radix.res

@@ -164,7 +164,7 @@ module DropdownMenu = {
     external make: React.component<props> = "Root"
   }
   module Trigger = {
-    type options = {asChild?: bool}
+    type options = {asChild?: bool, disabled?: bool}
     type props = {...options, children: React.element}
     @module("@radix-ui/react-dropdown-menu")
     external make: React.component<props> = "Trigger"
@@ -262,10 +262,10 @@ module DropdownMenu = {
   module CheckboxItem = {
     type options = {
       className?: string,
-      checked?: bool,
+      checked: bool,
       disabled?: bool,
       textValue?: bool,
-      onCheckedChange?: bool => unit,
+      onCheckedChange: bool => unit,
       onSelect?: ReactEvent.Mouse.t => unit,
     }
 
@@ -471,3 +471,143 @@ module Toast = {
     external make: React.component<props> = "Close"
   }
 }
+
+module Dialog = {
+  module Root = {
+    type options = {
+      defaultOpen?: bool,
+      \"open": bool,
+      onOpenChange?: bool => unit,
+      modal?: bool,
+    }
+    type props = {
+      ...options,
+      children: React.element,
+    }
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Root"
+  }
+  module Trigger = {
+    type props = {children: React.element, asChild?: bool}
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Trigger"
+  }
+
+  module Portal = {
+    @module("@radix-ui/react-dialog") @react.component
+    external make: (
+      ~children: React.element,
+      ~forceMount: bool=?,
+      ~className: string=?,
+    ) => React.element = "Portal"
+  }
+  module Overlay = {
+    @module("@radix-ui/react-dialog") @react.component
+    external make: (
+      ~children: React.element=?,
+      ~className: string=?,
+      ~asChild: bool=?,
+      ~forceMount: bool=?,
+    ) => React.element = "Overlay"
+  }
+  module Content = {
+    type align =
+      | @as("center") Center
+      | @as("start") Start
+      | @as("end") End
+
+    type side =
+      | @as("top") Top
+      | @as("right") Right
+      | @as("bottom") Bottom
+      | @as("left") Left
+
+    type options = {
+      asChild?: bool,
+      forceMount?: bool,
+      onOpenAutoFocus?: ReactEvent.Focus.t => unit,
+      onCloseAutoFocus?: ReactEvent.Focus.t => unit,
+      onEscapeKeyDown?: ReactEvent.Keyboard.t => unit,
+      onPointerDownOutside?: ReactEvent.Mouse.t => unit,
+      onInteractOutside?: ReactEvent.Mouse.t => unit,
+      className?: string,
+      style?: ReactDOMStyle.t,
+    }
+
+    type props = {
+      ...options,
+      children: React.element,
+    }
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Content"
+  }
+  module Close = {
+    type props = {className?: string, children?: React.element, asChild?: bool}
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Close"
+  }
+  module Title = {
+    type props = {className?: string, asChild?: bool, children?: React.element}
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Title"
+  }
+}
+
+// module ContextMenu = {
+//   module Root = {
+//     type options = {onOpenChange?: bool => unit, modal?: bool}
+//     type props = {
+//       ...options,
+//       children: React.element,
+//     }
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Root"
+//   }
+
+//   module Trigger = {
+//     type props = {children: React.element, disabled?: bool, asChild?: bool, className?: string}
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Trigger"
+//   }
+
+//   module Portal = {
+//     @module("@radix-ui/react-context-menu") @react.component
+//     external make: (~children: React.element) => React.element = "Portal"
+//   }
+//   module Content = {
+//     type options = {alignOffset?: int, sideOffset?: int, align?: string}
+
+//     type props = {
+//       ...options,
+//       className?: string,
+//       children: React.element,
+//     }
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Content"
+
+//     let className = "z-50 min-w-[220px] bg-white rounded-md overflow-hidden p-[5px] shadow-lg"
+//   }
+//   module Arrow = {
+//     type props = {className?: string, width?: int, height?: int}
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Arrow"
+//   }
+//   module Label = {
+//     type props = {className?: string, width?: int, height?: int}
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Label"
+//   }
+//   module Item = {
+//     type props = {
+//       className?: string,
+//       disabled?: bool,
+//       onSelect?: ReactEvent.Mouse.t => unit,
+//       textValue: string,
+//       children: React.element,
+//     }
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Item"
+
+//     let className = "text-sm leading-none text-neutral-700 rounded-[3px] flex items-center h-[25px] py-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-neutral-900 data-[disabled]:pointer-events-none data-[highlighted]:text-neutral-500 data-[highlighted]:bg-neutral-100"
+//   }
+// }

package/src/vendors/ReactUse.res

@@ -68,3 +68,16 @@ type scrollCoords = {
 
 @module("react-use")
 external useWindowScroll: unit => scrollCoords = "useWindowScroll"
+
+type measure = {
+  x: int,
+  y: int,
+  width: int,
+  height: int,
+  top: int,
+  right: int,
+  bottom: int,
+  left: int,
+}
+@module("react-use")
+external useMeasure: unit => (React.ref<Js.Nullable.t<Dom.element>>, measure) = "useMeasure"

package/src/vendors/ReactTableV8.res

@@ -1,184 +0,0 @@
-type coreRowModel
-type sortedRowModel
-type filteredRowModel
-type paginationRowModel
-
-@module("@tanstack/react-table")
-external getCoreRowModel: unit => coreRowModel = "getCoreRowModel"
-@module("@tanstack/react-table")
-external getSortedRowModel: unit => sortedRowModel = "getSortedRowModel"
-@module("@tanstack/react-table")
-external getFilteredRowModel: unit => filteredRowModel = "getFilteredRowModel"
-@module("@tanstack/react-table")
-external getPaginationRowModel: unit => paginationRowModel = "getPaginationRowModel"
-
-type paginationState = {
-  pageIndex: int,
-  pageSize: int,
-}
-
-type rowSelectionState = Js.Dict.t<bool>
-type filterState = {id: string, value: unknown}
-type sortingState = {id: string, desc: bool}
-
-@unboxed type sortState = Bool(bool) | SortOrder(string)
-
-type tableState = {
-  pagination: paginationState,
-  rowSelection: rowSelectionState,
-  columnFilters?: array<filterState>,
-  sorting?: array<sortingState>,
-}
-type tableInitialState = {
-  pagination?: paginationState,
-  rowSelection?: rowSelectionState,
-  columnFilters?: array<filterState>,
-  sorting?: array<sortingState>,
-}
-
-module TableAPI = {
-  type t = {initialState: tableInitialState}
-}
-
-module ColumnDef = {
-  type tableContext = {
-    getIsAllRowsSelected: unit => bool,
-    getIsSomeRowsSelected: unit => bool,
-    getToggleAllRowsSelectedHandler: (unit, ReactEvent.Form.t) => unit,
-  }
-
-  type rowOptions = {
-    getIsSelected: unit => bool,
-    getCanSelect: unit => bool,
-    getIsSomeSelected: unit => bool,
-    getToggleSelectedHandler: (unit, ReactEvent.Form.t) => unit,
-  }
-
-  type cellOptions<'columnData> = {
-    getValue: unit => 'columnData,
-    row: rowOptions,
-  }
-
-  type columnMeta<'filterVariant> = {filterVariant?: 'filterVariant}
-  type filterFnVariant = | @as("equals") Equals
-  type t<'tableData, 'filterVariant>
-  @obj
-  external make: (
-    ~id: string=?,
-    ~accessorFn: 'tableData => 'columnData,
-    ~header: 'columnData => React.element=?,
-    ~footer: unit => React.element=?,
-    ~cell: cellOptions<'columnData> => React.element,
-    ~meta: columnMeta<'filterVariant>=?,
-    ~enableResizing: int=?,
-    ~maxSize: int=?,
-    ~minSize: int=?,
-    ~size: int=?,
-    ~enableSorting: bool=?,
-    ~filterFn: filterFnVariant=?,
-    unit,
-  ) => t<'tableData, 'filterVariant> = ""
-}
-
-module Header = {
-  type t
-  type tableContext = {setColumnFilters: (array<filterState> => array<filterState>) => unit}
-  type context = {table: tableContext}
-
-  @module("@tanstack/react-table")
-  external flexRender: (t, context) => React.element = "flexRender"
-}
-
-module Cell = {
-  type t
-  type context
-
-  @module("@tanstack/react-table")
-  external flexRender: (t, context) => React.element = "flexRender"
-}
-
-type rec rowModel<'filterVariant> = {rows: array<row<'filterVariant>>}
-and row<'filterVariant> = {
-  getVisibleCells: unit => array<rowModelCell<'filterVariant>>,
-  id: string,
-}
-and rowModelCell<'filterVariant> = {
-  id: string,
-  isPlaceholder: bool,
-  column: 'filterValue. parentColumn<'filterValue, 'filterVariant>,
-  getContext: unit => Cell.context,
-}
-
-and parentColumn<'filterValue, 'filterVariant> = {
-  columnDef: parentColumnDef<'filterVariant>,
-  getFilterValue: unit => 'filterValue,
-  setFilterValue: 'filterValue => unit,
-  getCanSort: unit => bool,
-  getIsSorted: unit => sortState,
-  getToggleSortingHandler: 'a. (. unit) => 'a => unit,
-}
-and parentColumnDef<'filterVariant> = {
-  header: Header.t,
-  cell: Cell.t,
-  meta?: ColumnDef.columnMeta<'filterVariant>,
-}
-
-type rec headerGroup<'filterVariant> = {headers: array<header<'filterVariant>>, id: string}
-and header<'filterVariant> = {
-  isPlaceholder: bool,
-  column: 'a. parentColumn<'a, 'filterVariant>,
-  colSpan: int,
-  getSize: unit => int,
-  getContext: unit => Header.context,
-  id: string,
-}
-
-type columnInstance = {setFilterValue: 'a. 'a => unit}
-
-type rec tableInstance<'tableData, 'filterVariant> = {
-  getHeaderGroups: unit => array<headerGroup<'filterVariant>>,
-  getRowModel: unit => rowModel<'filterVariant>,
-  getFooterGroups: unit => array<headerGroup<'filterVariant>>,
-  getPageCount: unit => int,
-  getCanPreviousPage: unit => bool,
-  getCanNextPage: unit => bool,
-  getIsAllRowsSelected: unit => bool,
-  getIsSomeRowsSelected: unit => bool,
-  getToggleAllRowsSelectedHandler: (unit, ReactEvent.Form.t) => unit,
-  setPageIndex: (int => int) => unit,
-  setPageSize: int => unit,
-  previousPage: unit => unit,
-  nextPage: unit => unit,
-  getState: unit => tableState,
-  setOptions: (
-    tableOptions<'tableData, 'filterVariant> => tableOptions<'tableData, 'filterVariant>
-  ) => unit,
-  setColumnFilters: (array<filterState> => array<filterState>) => unit,
-  getColumn: string => option<columnInstance>,
-}
-and tableOptions<'tableData, 'filterVariant> = {
-  data: array<'tableData>,
-  columns: array<ColumnDef.t<'tableData, 'filterVariant>>,
-  getCoreRowModel: coreRowModel,
-  getSortedRowModel?: sortedRowModel,
-  onSortingChange?: (array<sortingState> => array<sortingState>) => unit,
-  getFilteredRowModel?: filteredRowModel,
-  getPaginationRowModel?: paginationRowModel,
-  onPaginationChange?: (paginationState => paginationState) => paginationState,
-  onRowSelectionChange?: (rowSelectionState => rowSelectionState) => unit,
-  pageCount?: int,
-  initialState?: tableInitialState,
-  state?: tableInitialState,
-  manualPagination?: bool,
-  manualSorting?: bool,
-  manualFiltering?: bool,
-  enableRowSelection?: bool,
-  enableMultiRowSelection?: bool,
-  debugTable?: bool,
-}
-
-@module("@tanstack/react-table")
-external useReactTable: tableOptions<'tableData, 'filterVariant> => tableInstance<
-  'tableData,
-  'filterVariant,
-> = "useReactTable"