@serendie/ui/dist/components/Drawer/Drawer.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as e, jsxs as s } from "react/jsx-runtime";
import { dialog_exports as t } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog.js";
import { Portal as g } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
import { SerendieSymbolClose as h } from "@serendie/symbols";
import { IconButton as x } from "../IconButton/IconButton.js";
import { cx as n } from "../../styled-system/css/cx.js";
import { sva as f } from "../../styled-system/css/sva.js";
const r = f({
  slots: ["backdrop", "content", "contentInner", "closeTrigger"],
  base: {
    backdrop: {
      background: "sd.system.color.component.scrim",
      position: "fixed",
      inset: 0,
      zIndex: "sd.system.elevation.zIndex.modal"
    },
    content: {
      position: "fixed",
      top: "0",
      width: "calc(100% - {spacing.sd.system.dimension.spacing.extraLarge})",
      maxWidth: "375px",
      height: "100vh",
      gap: "sd.system.dimension.spacing.twoExtraLarge",
      backgroundColor: "sd.system.color.component.surfaceContainerBright",
      boxShadow: "sd.system.elevation.shadow.level5",
      zIndex: "sd.system.elevation.zIndex.modal"
    },
    contentInner: {
      display: "grid",
      gap: "sd.system.dimension.spacing.medium"
    },
    closeTrigger: {
      display: "flex",
      alignItems: "flex-start",
      padding: "sd.system.dimension.spacing.twoExtraSmall"
    }
  },
  variants: {
    type: {
      left: {
        content: {
          left: "0",
          justifyContent: "flex-start"
        }
      },
      full: {
        content: {
          left: "0",
          width: "100%",
          minWidth: "100%",
          maxWidth: "100%"
        }
      },
      right: {
        content: {
          right: "0"
        },
        closeTrigger: {
          justifyContent: "flex-end"
        }
      }
    }
  },
  defaultVariants: {
    type: "right"
  }
}), k = ({
  isOpen: i,
  children: a,
  contentClassName: d,
  backdropClassName: l,
  ...c
}) => {
  const [m, p] = r.splitVariantProps(c), o = r(m);
  return /* @__PURE__ */ e(t.Root, { open: i, ...p, children: /* @__PURE__ */ s(g, { children: [
    /* @__PURE__ */ e(t.Backdrop, { className: n(o.backdrop, l) }),
    /* @__PURE__ */ e(t.Positioner, { children: /* @__PURE__ */ s(t.Content, { className: n(o.content, d), children: [
      /* @__PURE__ */ e("header", { className: o.closeTrigger, children: /* @__PURE__ */ e(t.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ e(
        x,
        {
          icon: /* @__PURE__ */ e(h, {}),
          shape: "rectangle",
          styleType: "ghost"
        }
      ) }) }),
      a
    ] }) })
  ] }) });
};
export {
  k as Drawer
};