@colisweb/rescript-toolkit 5.46.4 → 5.47.0

package/package.json

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

package/src/form/Toolkit__Form.res

@@ -720,6 +720,7 @@ module Make = (StateLenses: Config) => {
       ~label=?,
       ~id,
       ~size=?,
+      ~disabled=?,
       ~displayTitle=?,
       ~switchClassName=?,
       ~labelClassName=?,
@@ -735,6 +736,7 @@ module Make = (StateLenses: Config) => {
               onChange={value => handleChange(value)}
               name=id
               checked=value
+              ?disabled
               ?size
               ?displayTitle
               ?switchClassName

package/src/tailwind/tailwind.config.cjs

@@ -25,8 +25,30 @@ module.exports = {
         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)",
+        slideInLeft: "slideInLeft 0.3s ease-in",
+        slideOutRight: "slideInLeft 0.3s ease-in-out",
       },
       keyframes: {
+        slideInLeft: {
+          from: {
+            opacity: 0.2,
+            left: "100%",
+          },
+          to: {
+            opacity: 1,
+            left: "0",
+          },
+        },
+        slideOutRight: {
+          from: {
+            opacity: 1,
+            left: "0%",
+          },
+          to: {
+            opacity: 0,
+            left: "100%",
+          },
+        },
         backforth: {
           "0%": { left: "0px" },
           "50%": { left: "100%" },

package/src/ui/Toolkit__Ui.res

@@ -46,3 +46,4 @@ module ScrollArea = Toolkit__Ui_ScrollArea
 module PasswordRulesNotice = Toolkit__Ui_PasswordRulesNotice
 module SectionCard = Toolkit__Ui_SectionCard
 module SuspenseImage = Toolkit__Ui_SuspenseImage
+module Sheet = Toolkit__Ui_Sheet

package/src/ui/Toolkit__Ui_Sheet.res

@@ -0,0 +1,54 @@
+open Radix
+@react.component
+let make = (
+  ~disclosure: Toolkit__Hooks.disclosure,
+  ~title: option<React.element>=?,
+  ~children: React.element,
+  ~ariaLabel="",
+  ~icon: option<module(ReactIcons.Icon)>=?,
+  ~className="",
+) => {
+  <Dialog.Root
+    \"open"={disclosure.isOpen}
+    onOpenChange={isOpen => {
+      if !isOpen {
+        disclosure.hide()
+      }
+    }}>
+    <Dialog.Portal>
+      <Dialog.Overlay
+        className="data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-40"
+      />
+      <div className="z-50 fixed inset-0 overflow-y-auto flex min-h-full items-start justify-end">
+        <Dialog.Content
+          side={Right}
+          className={cx([
+            "bg-white p-4 shadow-lg  w-2/3 h-full relative data-[state=open]:animate-slideInLeft data-[state=close]:animate-slideOutRight",
+            className,
+          ])}>
+          <header className={cx(["flex items-center justify-between gap-4"])}>
+            {title->Option.mapWithDefault(React.null, title =>
+              <Dialog.Title
+                className={cx([
+                  "text-2xl pb-1 inline-flex items-center gap-2 font-display border-b w-full",
+                ])}>
+                {icon->Option.mapWithDefault(React.null, icon => {
+                  let module(Icon) = icon
+
+                  <Icon />
+                })}
+                title
+              </Dialog.Title>
+            )}
+            <button
+              onClick={_ => disclosure.hide()}
+              className={cx(["rounded-full hover:bg-neutral-200 p-1 modal-close-button"])}>
+              <ReactIcons.MdClose size=28 />
+            </button>
+          </header>
+          <div className="mt-4"> children </div>
+        </Dialog.Content>
+      </div>
+    </Dialog.Portal>
+  </Dialog.Root>
+}

package/src/ui/Toolkit__Ui_Sheet.resi

@@ -0,0 +1,9 @@
+@react.component
+let make: (
+  ~disclosure: Toolkit__Hooks.disclosure,
+  ~title: React.element=?,
+  ~children: React.element,
+  ~ariaLabel: string=?,
+  ~icon: module(ReactIcons.Icon)=?,
+  ~className: string=?,
+) => React.element

package/src/vendors/Radix.res

@@ -532,6 +532,7 @@ module Dialog = {
       onInteractOutside?: ReactEvent.Mouse.t => unit,
       className?: string,
       style?: ReactDOMStyle.t,
+      side?: side,
     }
 
     type props = {
@@ -551,6 +552,11 @@ module Dialog = {
     @module("@radix-ui/react-dialog")
     external make: React.component<props> = "Title"
   }
+  module Description = {
+    type props = {className?: string, asChild?: bool, children?: React.element}
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Description"
+  }
 }
 
 // module ContextMenu = {