Radix Bindings

Radix.re

type position = Css_AtomicTypes.PropertyPosition.t;
type overflow = Css_AtomicTypes.Overflow.t;

module Icons = Radix__Icons;
module Responsive = {
  [@deriving make]
  type t('a) = {
    initial: option('a),
    xs: option('a),
    sm: option('a),
    md: option('a),
    lg: option('a),
    xl: option('a),
  };
};
module Variant = {
  type t = [ | `classic | `solid | `soft | `surface | `outline | `ghost];
};

module Radius = {
  type t = [ | `none | `small | `medium | `large | `full];
};

module Type = {
  type weight = [ | `light | `regular | `medium | `bold];
};

module Color = {
  type accent = [
    | `gray
    | `gold
    | `bronze
    | `brown
    | `yellow
    | `amber
    | `orange
    | `tomato
    | `red
    | `ruby
    | `crimson
    | `pink
    | `plum
    | `purple
    | `violet
    | `iris
    | `indigo
    | `blue
    | `cyan
    | `teal
    | `jade
    | `green
    | `grass
    | `lime
    | `mint
    | `sky
  ];

  type gray = [ | `auto | `gray | `mauve | `slate | `sage | `olive | `sand];
};

module Theme = {
  [@deriving show]
  type appearance = [ | `light | `dark];

  type panelBackground = [ | `solid | `translucent];

  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~onClick: React.Event.Synthetic.t => unit=?,
      ~accentColor: Color.accent=?,
      ~appearance: appearance=?,
      ~asChild: bool=?,
      ~children: React.element,
      ~grayColor: Color.gray=?,
      ~hasBackground: bool=?,
      ~panelBackground: panelBackground=?,
      ~radius: Radius.t=?,
      ~scaling: [@mel.string] [
                  | [@mel.as "90%"] `xs
                  | [@mel.as "95%"] `s
                  | [@mel.as "100%"] `m
                  | [@mel.as "105%"] `l
                  | [@mel.as "110%"] `xl
                ]
                  =?
    ) =>
    React.element =
    "Theme";
};

module Flex = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~id: string=?,
      ~className: string=?,
      ~children: React.element=?,
      ~onClick: React.Event.Synthetic.t => unit=?,
      // MarginProps
      ~m: string=?,
      ~mb: string=?,
      ~ml: string=?,
      ~mr: string=?,
      ~mt: string=?,
      ~mx: string=?,
      ~my: string=?,
      // LayoutProps
      ~bottom: string=?,
      ~flexBasis: string=?,
      ~flexGrow: string=?,
      ~flexShrink: string=?,
      ~gridColumn: string=?,
      ~gridColumnEnd: string=?,
      ~gridColumnStart: string=?,
      ~height: string=?,
      ~inset: string=?,
      ~left: string=?,
      ~maxHeight: string=?,
      ~maxWidth: string=?,
      ~minHeight: string=?,
      ~minWidth: string=?,
      ~overflow: overflow=?,
      ~overflowX: overflow=?,
      ~overflowY: overflow=?,
      ~p: string=?,
      ~pb: string=?,
      ~pl: string=?,
      ~position: position=?,
      ~pr: string=?,
      ~pt: string=?,
      ~px: string=?,
      ~py: string=?,
      ~right: string=?,
      ~top: string=?,
      ~width: string=?,
      ~widthResponsive: [@mel.as "width"] Responsive.t(string)=?,
      // Own Props
      ~align: [@mel.string] [
                | `start
                | `center
                | [@mel.as "end"] `end_
                | `baseline
                | `stretch
              ]
                =?,
      ~asChild: bool=?,
      ~as_: [@mel.as "as"] [ | `div | `span]=?,
      ~direction: [@mel.string] [
                    | `row
                    | `column
                    | [@mel.as "row-reverse"] `rowReverse
                    | [@mel.as "column-reverse"] `columnReverse
                  ]
                    =?,
      ~directionResponsive: [@mel.as "direction"]
                            Responsive.t(
                              [@mel.string] [
                                | `row
                                | `column
                                | [@mel.as "row-reverse"] `rowReverse
                                | [@mel.as "column-reverse"] `columnReverse
                              ],
                            )
                              =?,
      ~display: [@mel.string] [
                  | `none
                  | [@mel.as "inline-flex"] `inlineFlex
                  | `flex
                ]
                  =?,
      ~gap: string=?,
      ~gapX: string=?,
      ~gapY: string=?,
      ~inset: string=?,
      ~justify: [@mel.string] [
                  | `start
                  | `center
                  | [@mel.as "end"] `end_
                  | `between
                ]
                  =?,
      ~position: position=?,
      ~wrap: [@mel.string] [
               | `nowrap
               | `wrap
               | [@mel.as "wrap-reverse"] `wrapReverse
             ]
               =?
    ) =>
    React.element =
    "Flex";
};

module Heading = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~className: string=?,
      ~children: React.element,
      // MarginProps
      ~m: string=?,
      ~mb: string=?,
      ~ml: string=?,
      ~mr: string=?,
      ~mt: string=?,
      ~mx: string=?,
      ~my: string=?,
      // Own Props
      ~size: string=?,
      ~align: [ | `left | `center | `right]=?,
      ~asChild: bool=?,
      ~as_: [@mel.as "as"] [ | `h1 | `h2 | `h3 | `h4 | `h5 | `h6]=?,
      ~color: Color.accent=?,
      ~highContrast: bool=?,
      ~trim: [@mel.string] [
               | `normal
               | `start
               | [@mel.as "end"] `end_
               | `both
             ]
               =?,
      ~truncate: bool=?,
      ~weight: Type.weight=?,
      ~wrap: [ | `wrap | `nowrap | `pretty | `balance]=?
    ) =>
    React.element =
    "Heading";
};

module Text = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~onClick: React.Event.Synthetic.t => unit=?,
      ~className: string=?,
      ~align: [ | `left | `center | `right]=?,
      ~asChild: bool=?,
      ~as_: [@mel.as "as"] [ | `span | `div | `label | `p]=?,
      ~children: React.element,
      ~color: Color.accent=?,
      ~highContrast: bool=?,
      ~m: string=?,
      ~mb: string=?,
      ~ml: string=?,
      ~mr: string=?,
      ~mt: string=?,
      ~mx: string=?,
      ~my: string=?,
      ~size: string=?,
      ~trim: [@mel.string] [
               | `normal
               | `start
               | [@mel.as "end"] `end_
               | `both
             ]
               =?,
      ~truncate: bool=?,
      ~weight: Type.weight=?,
      ~wrap: [ | `wrap | `nowrap | `pretty | `balance]=?
    ) =>
    React.element =
    "Text";
};

module Button = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~className: string=?,
      ~onClick: React.Event.Synthetic.t => unit=?,
      ~kind: [@mel.as "type"] [ | `button | `submit]=?,
      ~align: [ | `left | `center | `right]=?,
      ~asChild: bool=?,
      ~disabled: bool=?,
      ~children: React.element,
      ~color: Color.accent=?,
      ~highContrast: bool=?,
      ~loading: bool=?,
      ~radius: Radius.t=?,
      ~size: [@mel.string] [
               | [@mel.as "1"] `s
               | [@mel.as "2"] `m
               | [@mel.as "3"] `l
               | [@mel.as "4"] `xl
             ]
               =?,
      ~variant: Variant.t=?
    ) =>
    React.element =
    "Button";
};

module Container = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~align: [ | `left | `center | `right]=?,
      ~asChild: bool=?,
      ~bottom: string=?,
      ~children: React.element,
      ~display: [ | `none | `initial]=?,
      ~flexBasis: string=?,
      ~flexGrow: string=?,
      ~flexShrink: string=?,
      ~gridColumn: string=?,
      ~gridColumnEnd: string=?,
      ~gridColumnStart: string=?,
      ~gridRow: string=?,
      ~gridRowEnd: string=?,
      ~gridRowStart: string=?,
      ~height: string=?,
      ~inset: string=?,
      ~left: string=?,
      ~m: string=?,
      ~maxHeight: string=?,
      ~maxWidth: string=?,
      ~mb: string=?,
      ~minHeight: string=?,
      ~minWidth: string=?,
      ~ml: string=?,
      ~mr: string=?,
      ~mt: string=?,
      ~mx: string=?,
      ~my: string=?,
      ~overflow: overflow=?,
      ~overflowX: overflow=?,
      ~overflowY: overflow=?,
      ~p: string=?,
      ~pb: string=?,
      ~pl: string=?,
      ~position: position=?,
      ~pr: string=?,
      ~pt: string=?,
      ~px: string=?,
      ~py: string=?,
      ~right: string=?,
      ~size: [@mel.string] [
               | [@mel.as "1"] `s
               | [@mel.as "2"] `m
               | [@mel.as "3"] `l
               | [@mel.as "4"] `xl
             ]
               =?,
      ~top: string=?,
      ~width: string=?
    ) =>
    React.element =
    "Container";
};

module Card = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~asChild: bool=?,
      ~onClick: React.Event.Mouse.t => unit=?,
      ~onMouseOver: React.Event.Mouse.t => unit=?,
      ~onMouseOut: React.Event.Mouse.t => unit=?,
      ~id: string=?,
      ~className: string=?,
      ~children: React.element,
      ~m: string=?,
      ~mb: string=?,
      ~ml: string=?,
      ~mr: string=?,
      ~mt: string=?,
      ~mx: string=?,
      ~my: string=?,
      ~size: [@mel.string] [
               | [@mel.as "1"] `xs
               | [@mel.as "2"] `s
               | [@mel.as "3"] `m
               | [@mel.as "4"] `l
               | [@mel.as "5"] `xl
             ]
               =?,
      ~variant: [ | `surface | `classic | `ghost]=?
    ) =>
    React.element =
    "Card";
};

module Label = {
  module Root = {
    [@mel.module "@radix-ui/react-label"] [@react.component]
    external make:
      (~asChild: bool=?, ~children: React.element, ~htmlFor: string=?) =>
      React.element =
      "Root";
  };
};

module Switch = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~size: [@mel.string] [
               | [@mel.as "1"] `s
               | [@mel.as "2"] `m
               | [@mel.as "3"] `l
             ]
               =?,
      ~onClick: React.Event.Synthetic.t => unit=?,
      ~onChange: React.Event.Synthetic.t => unit=?,
      ~radius: Radius.t=?,
      ~defaultChecked: bool=?,
      ~value: bool=?,
      ~highContrast: bool=?,
      ~variant: [ | `surface | `classic | `soft]=?
    ) =>
    React.element =
    "Switch";
};

module TextArea = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~size: [@mel.string] [
               | [@mel.as "1"] `s
               | [@mel.as "2"] `m
               | [@mel.as "3"] `l
             ]
               =?,
      ~className: string=?,
      ~onChange: React.Event.Synthetic.t => unit=?,
      ~placeholder: string=?,
      ~required: bool=?,
      ~radius: Radius.t=?,
      ~defaultValue: string=?,
      ~value: string=?,
      ~color: Color.accent=?,
      ~resize: [ | `none | `vertical | `horizontal | `both]=?,
      ~variant: [ | `surface | `classic | `soft]=?
    ) =>
    React.element =
    "TextArea";
};

module ScrollArea = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~size: [@mel.string] [
               | [@mel.as "1"] `s
               | [@mel.as "2"] `m
               | [@mel.as "3"] `l
             ]
               =?,
      ~className: string=?,
      ~kind: [@mel.as "type"] string=?,
      ~radius: Radius.t=?,
      ~children: React.element,
      ~asChild: bool=?,
      ~scrollbars: [ | `vertical | `horizontal | `both]=?
    ) =>
    React.element =
    "ScrollArea";
};

module Slider = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~size: [@mel.string] [
               | [@mel.as "1"] `s
               | [@mel.as "2"] `m
               | [@mel.as "3"] `l
             ]
               =?,
      ~className: string=?,
      ~onChange: React.Event.Synthetic.t => unit=?,
      ~highContrast: bool=?,
      ~radius: Radius.t=?,
      ~min: int=?,
      ~max: int=?,
      ~step: int=?,
      ~defaultValue: array(int)=?,
      ~color: Color.accent=?,
      ~resize: [ | `none | `vertical | `horizontal | `both]=?,
      ~variant: [ | `surface | `classic | `soft]=?
    ) =>
    React.element =
    "Slider";
};

module TextField = {
  module Root = {
    [@mel.scope "TextField"]
    [@mel.module "@radix-ui/themes"]
    [@react.component]
    external make:
      (
        ~children: React.element=?,
        ~className: string=?,
        ~type_: [@mel.as "type"] string=?,
        // MarginProps
        ~m: string=?,
        ~mb: string=?,
        ~ml: string=?,
        ~mr: string=?,
        ~mt: string=?,
        ~mx: string=?,
        ~my: string=?,
        // Own Props
        ~asChild: bool=?,
        ~color: Color.accent=?,
        ~id: string=?,
        ~name: string=?,
        ~defaultValue: string=?,
        ~value: string=?,
        ~placeholder: string=?,
        ~required: bool=?,
        ~onChange: React.Event.Synthetic.t => unit=?,
        ~radius: Radius.t=?,
        ~size: [@mel.string] [
                 | [@mel.as "1"] `s
                 | [@mel.as "2"] `m
                 | [@mel.as "3"] `l
               ]
                 =?,
        ~variant: [ | `surface | `classic | `soft]=?
      ) =>
      React.element =
      "Root";
  };

  module Slot = {
    [@mel.scope "TextField"]
    [@mel.module "@radix-ui/themes"]
    [@react.component]
    external make:
      (
        ~children: React.element=?,
        ~color: Color.accent=?,
        ~gap: string=?,
        ~px: string=?,
        ~pl: string=?,
        ~pr: string=?,
        ~side: [ | `left | `right]=?
      ) =>
      React.element =
      "Slot";
  };
};

module Box = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~children: React.element=?,
      ~className: string=?,
      // MarginProps
      ~m: string=?,
      ~mb: string=?,
      ~ml: string=?,
      ~mr: string=?,
      ~mt: string=?,
      ~mx: string=?,
      ~my: string=?,
      // LayoutProps
      ~bottom: string=?,
      ~flexBasis: string=?,
      ~flexGrow: string=?,
      ~flexShrink: string=?,
      ~gridColumn: string=?,
      ~gridColumnEnd: string=?,
      ~gridColumnStart: string=?,
      ~height: string=?,
      ~inset: string=?,
      ~left: string=?,
      ~maxHeight: string=?,
      ~maxWidth: string=?,
      ~minHeight: string=?,
      ~minWidth: string=?,
      ~overflow: overflow=?,
      ~overflowX: overflow=?,
      ~overflowY: overflow=?,
      ~p: string=?,
      ~pb: string=?,
      ~pl: string=?,
      ~position: position=?,
      ~pr: string=?,
      ~pt: string=?,
      ~px: string=?,
      ~py: string=?,
      ~right: string=?,
      ~top: string=?,
      ~width: string=?,
      // Own Props
      ~display: [@mel.string] [
                  | `none
                  | `inline
                  | [@mel.as "inline-block"] `inlineBlock
                  | `block
                ]
                  =?,
      ~asChild: bool=?,
      ~as_: [@mel.as "as"] [ | `div | `span]=?
    ) =>
    React.element =
    "Box";
};

module Spinner = {
  [@mel.module "@radix-ui/themes"] [@react.component]
  external make:
    (
      ~size: [@mel.string] [
               | [@mel.as "1"] `s
               | [@mel.as "2"] `m
               | [@mel.as "3"] `l
             ]
               =?,
      ~display: [@mel.string] [
                  | `none
                  | `inline
                  | [@mel.as "inline-block"] `inlineBlock
                  | `block
                ]
                  =?,
      ~loading: bool=?
    ) =>
    React.element =
    "Spinner";
};

module DropdownMenu = {
  module Root = {
    [@mel.scope "DropdownMenu"]
    [@mel.module "@radix-ui/themes"]
    [@react.component]
    external make:
      (
        ~children: React.element=?,
        ~dir: [ | `rtl | `ltr]=?,
        ~open_: [@mel.as "open"] bool=?,
        ~defaultOpen: bool=?,
        ~onOpenChange: bool => unit=?,
        ~modal: bool=?
      ) =>
      React.element =
      "Root";
  };

  module Trigger = {
    [@mel.scope "DropdownMenu"]
    [@mel.module "@radix-ui/themes"]
    [@react.component]
    external make:
      (
        ~onClick: React.Event.Synthetic.t => unit=?,
        ~kind: [@mel.as "type"] [ | `button | `submit]=?,
        ~align: [ | `left | `center | `right]=?,
        ~asChild: bool=?,
        ~disabled: bool=?,
        ~children: React.element,
        ~color: Color.accent=?,
        ~highContrast: bool=?,
        ~loading: bool=?,
        ~radius: Radius.t=?,
        ~size: [@mel.string] [
                 | [@mel.as "1"] `s
                 | [@mel.as "2"] `m
                 | [@mel.as "3"] `l
                 | [@mel.as "4"] `xl
               ]
                 =?,
        ~variant: Variant.t=?
      ) =>
      React.element =
      "Trigger";
  };

  module Content = {
    [@mel.scope "DropdownMenu"]
    [@mel.module "@radix-ui/themes"]
    [@react.component]
    external make:
      (~children: React.element, ~forceMount: bool=?) => React.element =
      "Content";
  };

  module Item = {
    [@mel.scope "DropdownMenu"]
    [@mel.module "@radix-ui/themes"]
    [@react.component]
    external make:
      (
        ~children: React.element,
        ~disabled: bool=?,
        ~textValue: bool=?,
        ~onClick: React.Event.Synthetic.t => unit=?,
        ~onSelect: React.Event.Synthetic.t => unit=?
      ) =>
      React.element =
      "Item";
  };
};

module HoverCard = {
  module Root = {
    module Comp = {
      [@mel.scope "HoverCard"]
      [@mel.module "@radix-ui/themes"]
      [@react.component]
      external make:
        (~children: React.element, ~ref: ReactDOM.domRef=?) => React.element =
        "Root";
    };

    [@react.component]
    let make =
      React.forwardRef((~children, _ref) =>
        <Comp
          ref=?{
            Js.Nullable.toOption(_ref)->Belt.Option.map(ReactDOM.Ref.domRef)
          }>
          children
        </Comp>
      );
  };

  module Trigger = {
    module Comp = {
      [@mel.scope "HoverCard"]
      [@mel.module "@radix-ui/themes"]
      [@react.component]
      external make:
        (~children: React.element, ~ref: ReactDOM.domRef=?) => React.element =
        "Trigger";
    };

    [@react.component]
    let make =
      React.forwardRef((~children, _ref) =>
        <Comp
          ref=?{
            Js.Nullable.toOption(_ref)->Belt.Option.map(ReactDOM.Ref.domRef)
          }>
          children
        </Comp>
      );
  };

  module Content = {
    module Comp = {
      [@mel.scope "HoverCard"]
      [@mel.module "@radix-ui/themes"]
      [@react.component]
      external make:
        (~children: React.element, ~ref: ReactDOM.domRef=?) => React.element =
        "Content";
    };

    [@react.component]
    let make =
      React.forwardRef((~children, _ref) =>
        <Comp
          ref=?{
            Js.Nullable.toOption(_ref)->Belt.Option.map(ReactDOM.Ref.domRef)
          }>
          children
        </Comp>
      );
  };
};

module Callout = {
  module Root = {
    [@mel.scope "Callout"] [@mel.module "@radix-ui/themes"] [@react.component]
    external make:
      (
        ~children: React.element,
        ~size: [@mel.string] [
                 | [@mel.as "1"] `s
                 | [@mel.as "2"] `m
                 | [@mel.as "3"] `l
               ]
                 =?,
        ~color: Color.accent=?,
        ~variant: [ | `surface | `classic | `ghost]=?,
        // MarginProps
        ~m: string=?,
        ~mb: string=?,
        ~ml: string=?,
        ~mr: string=?,
        ~mt: string=?,
        ~mx: string=?,
        ~my: string=?
      ) =>
      React.element =
      "Root";
  };

  module Icon = {
    [@mel.scope "Callout"] [@mel.module "@radix-ui/themes"] [@react.component]
    external make: (~children: React.element) => React.element = "Icon";
  };

  module Text = {
    [@mel.scope "Callout"] [@mel.module "@radix-ui/themes"] [@react.component]
    external make: (~children: React.element) => React.element = "Text";
  };
};

module Tooltip = {
  open CssJs;
  module Root = {
    [@mel.module "@radix-ui/react-tooltip"] [@react.component]
    external make:
      (
        ~className: string=?,
        ~defaultOpen: bool=?,
        ~onOpenChange: bool => unit=?,
        ~delayDuration: int=?,
        ~disableHoverableContent: bool=?,
        ~children: React.element=?
      ) =>
      React.element =
      "Root";
  };

  module Trigger = {
    [@mel.module "@radix-ui/react-tooltip"] [@react.component]
    external make:
      (~className: string=?, ~asChild: bool=?, ~children: React.element=?) =>
      React.element =
      "Trigger";
  };

  module Portal = {
    [@mel.module "@radix-ui/react-tooltip"] [@react.component]
    external make:
      (
        ~className: string=?,
        ~forceMount: bool=?,
        ~container: Webapi.Dom.Element.t=?,
        ~children: React.element=?
      ) =>
      React.element =
      "Portal";
  };

  module Content = {
    [@mel.module "@radix-ui/react-tooltip"] [@react.component]
    external make:
      (
        ~className: string=?,
        ~children: React.element=?,
        ~asChild: bool=?,
        ~onEscapeKey: React.Event.Keyboard.t => unit=?,
        ~onPointerDownOutside: React.Event.Mouse.t => unit=?,
        ~forceMount: bool=?,
        ~side: [ | `top | `right | `bottom | `left]=?,
        ~sideOffset: int=?,
        ~align: [@mel.string] [ | `start | `center | [@mel.as "end"] `end_]=?,
        ~alignOffset: int=?,
        ~avoidCollissions: bool=?,
        ~collisionBoundary: array(React.element)=?,
        ~collissionPadding: int=?,
        ~arrowPadding: int=?,
        ~sticky: [ | `partial | `always]=?,
        ~hideWhenDetached: bool=?
      ) =>
      React.element =
      "Content";
  };

  module Arrow = {
    [@mel.module "@radix-ui/react-tooltip"] [@react.component]
    external make:
      (
        ~className: string=?,
        ~asChild: bool=?,
        ~width: int=?,
        ~height: int=?
      ) =>
      React.element =
      "Arrow";
  };

  [@react.component]
  let make = (~content, ~children) => {
    let darkMode = Dom.useDarkMode();

    <Root>
      <Trigger className=[%cx [|cursor(`default)|]] asChild=true>
        children
      </Trigger>
      <Portal container={ReactDOM.querySelector("#root div")->Option.getExn}>
        <Content>
          <Framer.Presence>
            <Framer.Motion
              initial={Framer.Animation.make(~opacity=1.0, ~y=5., ())}
              animate={Framer.Animation.make(~opacity=1.0, ~y=0.0, ())}
              exit={Framer.Animation.make(~opacity=0.0, ~y=5., ())}>
              <Card
                variant=`ghost
                size=`s
                className=[%cx
                  [|
                    border(
                      1->px,
                      `solid,
                      darkMode
                        ? `rgba((55, 51, 56, `num(0.25)))
                        : `rgba((255, 255, 255, `num(0.25))),
                    ),
                    maxWidth(360->px),
                    backgroundColor(var("--gray-2"))->important,
                    padding2(~v=0.5->rem, ~h=1.->rem)->important,
                    margin(`zero)->important,
                  |]
                ]>
                content
              </Card>
              <Arrow
                className=[%cx
                  [|
                    unsafe("fill", "var(--gray-2)"),
                    unsafe("stroke", darkMode ? "#373338" : "#fff"),
                  |]
                ]
              />
            </Framer.Motion>
          </Framer.Presence>
        </Content>
      </Portal>
    </Root>;
  };
};

module Dialog = {
  open CssJs;
  module Root = {
    [@mel.module "@radix-ui/react-dialog"] [@react.component]
    external make:
      (
        ~className: string=?,
        ~defaultOpen: bool=?,
        ~isOpen: [@mel.as "open"] bool=?,
        ~onOpenChange: bool => unit=?,
        ~children: React.element=?
      ) =>
      React.element =
      "Root";
  };

  module Trigger = {
    [@mel.module "@radix-ui/react-dialog"] [@react.component]
    external make:
      (~className: string=?, ~asChild: bool=?, ~children: React.element=?) =>
      React.element =
      "Trigger";
  };

  module Portal = {
    [@mel.module "@radix-ui/react-dialog"] [@react.component]
    external make:
      (
        ~className: string=?,
        ~forceMount: bool=?,
        ~container: Webapi.Dom.Element.t=?,
        ~children: React.element=?
      ) =>
      React.element =
      "Portal";
  };

  module Overlay = {
    [@mel.module "@radix-ui/react-dialog"] [@react.component]
    external make:
      (~className: string=?, ~forceMount: bool=?, ~asChild: bool=?) =>
      React.element =
      "Overlay";
  };

  module Content = {
    [@mel.module "@radix-ui/react-dialog"] [@react.component]
    external make:
      (
        ~className: string=?,
        ~children: React.element=?,
        ~asChild: bool=?,
        ~forceMount: bool=?,
        ~onOpenAutoFocus: React.Event.Keyboard.t => unit=?,
        ~onCloseAutoFocus: React.Event.Keyboard.t => unit=?,
        ~onEscapeKey: React.Event.Keyboard.t => unit=?,
        ~onPointerDownOutside: React.Event.Mouse.t => unit=?,
        ~onClick: React.Event.Mouse.t => unit=?,
        ~onInteractionOutside: React.Event.Keyboard.t => unit=?
      ) =>
      React.element =
      "Content";
  };

  module Close = {
    [@mel.module "@radix-ui/react-dialog"] [@react.component]
    external make:
      (~className: string=?, ~children: React.element=?, ~asChild: bool=?) =>
      React.element =
      "Close";
  };

  module Title = {
    [@mel.module "@radix-ui/react-dialog"] [@react.component]
    external make:
      (~className: string=?, ~children: React.element=?, ~asChild: bool=?) =>
      React.element =
      "Title";
  };

  module Description = {
    [@mel.module "@radix-ui/react-dialog"] [@react.component]
    external make:
      (~className: string=?, ~children: React.element=?, ~asChild: bool=?) =>
      React.element =
      "Description";
  };

  [@react.component]
  let make =
      (
        ~isOpen=false,
        ~onEscapeKey=ignore,
        ~onPointerDownOutside=ignore,
        ~trigger=?,
        ~title=?,
        ~description=?,
        ~children,
      ) => {
    let darkMode = Dom.useDarkMode();
    let shadowColour =
      darkMode
        ? `rgba((26, 25, 27, `num(1.))) : `rgba((255, 255, 255, `num(1.)));

    <Root isOpen>
      {trigger
       |> Option.map(trigger =>
            <Trigger className=[%cx [|cursor(`default)|]] asChild=true>
              trigger
            </Trigger>
          )
       |> Option.getOr(<Empty />)}
      <Portal container={ReactDOM.querySelector("#root div")->Option.getExn}>
        <Flex
          direction=`row
          justify=`center
          align=`center
          onClick=onPointerDownOutside
          className=[%cx
            [|
              backgroundColor(
                darkMode
                  ? `rgba((55, 51, 56, `num(0.75)))
                  : `rgba((255, 255, 255, `num(0.75))),
              ),
              backdropFilter([|`blur(5->px)|]),
              position(`fixed),
              left(`zero),
              top(`zero),
              margin(`zero),
              padding(`zero),
              width(100.0->vw),
              height(100.0->vh),
              zIndex(`num(999)),
            |]
          ]>
          <Framer.Presence>
            <Framer.Motion
              initial={Framer.Animation.make(~opacity=1.0, ~y=150., ())}
              animate={Framer.Animation.make(~opacity=1.0, ~y=0.0, ())}
              exit={Framer.Animation.make(~opacity=0.0, ~y=5., ())}>
              <Card
                className=[%cx
                  [|
                    display(`flex)->important,
                    maxWidth(66.->vw),
                    width(66.->vw),
                    maxHeight(60.->vh),
                    height(50.->vh),
                    flexDirection(`column),
                    boxShadows([|
                      Shadow.box(
                        ~x=(-5)->px,
                        ~y=(-15)->px,
                        ~blur=10->px,
                        ~inset=true,
                        shadowColour,
                      ),
                    |]),
                  |]
                ]
                variant=`surface
                size=`m
                onClick={e => React.Event.Mouse.stopPropagation(e)}>
                {title
                 |> Option.map(title =>
                      <Title
                        className=[%cx [|margin(`zero), padding(`zero)|]]>
                        title
                      </Title>
                    )
                 |> Option.getOr(<Empty />)}
                {description
                 |> Option.map(description => <Text> description </Text>)
                 |> Option.getOr(<Empty />)}
                <Box height="1rem" />
                children
              </Card>
            </Framer.Motion>
          </Framer.Presence>
        </Flex>
      </Portal>
    </Root>;
  };
};