sidepanel

 const handleOpenSidepanel = () => {
    open(APP_PROVIDER_TYPE.sidepanel, ({ close }) => (
      <div className="w-96">
        <Btn
          onClick={close}
          variant="outline"
          className="px-4 py-2 text-sm rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition"
        >
          Cancel
        </Btn>
      </div>
    ));
  };
 <Btn
        onClick={handleOpenSidepanel}
        variant="solid"
        className="px-4 py-2 text-sm rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition"
      >
        Trigger Global Sidepanel
      </Btn>

other

 {item.type === APP_PROVIDER_TYPE.sidepanel && (
            <SidePanel
              options={item.options || {}}
              onClose={() => close(item.id)}
            >
              {item.content({
                close: () => close(item.id),
              })}
            </SidePanel>
          )}

import type { ReactNode } from "react";
import { Backdrop } from "./backdrop";
import { type Provider as Props } from "@/root.config";
import { Potral } from "./portal";
import { Flex } from "../layout";

interface SidePanelBaseProps {
  children?: ReactNode | string;
  onClose?: () => void;
  options: Props.BaseProps["options"];
}

export function SidePanel({ children, onClose, options }: SidePanelBaseProps) {
  return (
    <>
      <Potral>
        <Backdrop justify="end" {...options} onClose={() => onClose?.()}>
          <Flex
            direction="column"
            justify="start"
            items="center"
            className="bg-white h-full relative w-fit"
          >
            {children}
          </Flex>
        </Backdrop>
      </Potral>
    </>
  );
}